import {
  Box,
  Alert,
  Button,
  Card,
  CardContent,
  Typography,
  Stepper,
  Step,
  StepLabel,
  TextField,
} from "@mui/material";
import React, { useState } from "react";
import Drawer from "../../components/Drawer";
import PageLayout from "../../../Common/Layout/PageLayout";
import PageHeader from "../../../Common/PageHeader/PageHeader";
import styles from "./index.module.css";
import { ApplyContractRequestBody } from "../../services/interface";
import { applyContract } from "../../services";
import message from "../../../../../utils/message";

const steps = [
  {
    title: "提交合同申请",
    desc: "框架/订单",
  },
  {
    title: "生成合同草稿",
    desc: "双方确认合同内容",
  },
  {
    title: "正式合同签署",
    desc: "双方加盖公章",
  },
  {
    title: "合同生效",
  },
];

const contractList = [
  {
    title: "合同模版",
    desc: "适用于签订双方购买意向协议",
    downloadUrl: "",
    id: "1",
  },
];

type FormValue = ApplyContractRequestBody;

class DrawerState {
  visible: boolean = false;
  form: FormValue = {
    desc: "",
    phone: 0,
  };
}

const Contact: React.FC = () => {
  const [drawer, setDrawer] = useState<DrawerState>(new DrawerState());

  const drawerHideHandler = () => {
    setDrawer((state) => ({ ...state, visible: false }));
  };
  const drawerShowHandler = () => {
    setDrawer({ ...new DrawerState(), visible: true });
  };

  const submitHandler = (e: React.FormEvent<HTMLFormElement>) => {
    console.log(drawer.form);
    e.preventDefault();
    applyContract(drawer.form).then((res) => {
      message.success("提交成功");
      drawerHideHandler();
    });
  };

  const updateValueHandler = (key: keyof FormValue, value: string | number) => {
    setDrawer((state) => ({
      ...state,
      form: {
        ...state.form,
        [key]: value,
      },
    }));
  };

  return (
    <>
      <PageHeader label="合同管理"></PageHeader>
      <PageLayout>
        <div className={styles.operate}>
          <Button variant="contained" onClick={drawerShowHandler}>
            申请合同
          </Button>
          <Alert>
            土星云电子合同与纸质合同具有同等法律效力，可直接打印下载使用，无需邮寄
            。
          </Alert>
        </div>
        <br />
        <Card variant="outlined">
          <CardContent>
            <Typography variant="h6" style={{ textAlign: "center" }}>
              <span>申请合同指引</span>
            </Typography>
            <div className={styles.stepWrap}>
              <Stepper activeStep={4} alternativeLabel>
                {steps.map((item, index) => {
                  return (
                    <Step key={index}>
                      <div>
                        <StepLabel>{item.title}</StepLabel>
                        <div className={styles.desc}>{item.desc}</div>
                      </div>
                    </Step>
                  );
                })}
              </Stepper>
            </div>
          </CardContent>
        </Card>
        <div className={styles.contractTempList}>
          {contractList.map((item) => (
            <Card key={item.id} className={styles.contractItem}>
              <CardContent className={styles.contractContent}>
                <div className={styles.contractTitle}>
                  <span>{item.title}</span>
                  <a
                    href="https://open-25cf05c9-3bfd-4bae-8220-1ebe5ad30263-s3.kube.ucas/official/%E5%9C%9F%E6%98%9F%E4%BA%91%E5%AD%98%E5%82%A8%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.pdf"
                    download="土星云存储服务协议.pdf"
                    target="__blank"
                  >
                    <Button>下 载</Button>
                  </a>
                </div>
                <div className={styles.contractDesc}>{item.desc}</div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Box
          component="form"
          sx={{
            "& .MuiFormControl-root": { mb: 3 },
          }}
        >
          <Drawer
            visible={drawer.visible}
            onCancel={drawerHideHandler}
            title="申请合同"
            footer={false}
          >
            <Box
              component="form"
              sx={{
                "& .MuiFormControl-root": { mb: 3 },
              }}
              style={{ maxWidth: 500 }}
              onSubmit={submitHandler}
            >
              <TextField
                required
                fullWidth
                label="联系人手机"
                name="phone"
                value={drawer.form.phone || ""}
                onChange={(e) => {
                  updateValueHandler("phone", Number(e.target.value));
                }}
              ></TextField>
              <TextField
                fullWidth
                label="备注"
                minRows={4}
                multiline
                onChange={(e) => {
                  updateValueHandler("desc", e.target.value);
                }}
              ></TextField>
              <Button variant="contained" type="submit">
                确认申请
              </Button>
            </Box>
          </Drawer>
        </Box>
      </PageLayout>
    </>
  );
};

export default Contact;
