import React, { useState, useCallback } from "react";
import { Button, Box, TextField, FormControl, MenuItem } from "@mui/material";
import { UserInfo, CompanyAuthRequestBody } from "../../../services/interface";
import { companyAuthentication } from "../../../services";
import { COMPANY_CER, V_CODE_SEND } from "../../../constants";
import ValidateCodeInput from "../../../components/ValidateCodeInput";
import message from "../../../../../../utils/message";
import UploadFile from "../../../components/UploadFile";

interface IProps {
  userInfo?: UserInfo;
}

type FormValue = CompanyAuthRequestBody;

function Company({ userInfo }: IProps) {
  const [loading, setLoading] = useState<boolean>(false);
  const [form, setForm] = useState<FormValue>({
    company_name: "",
    certificates_type: 1,
    legal_person: "",
    certificates_url: "",
    legal_id_card: "",
    legal_phone: 0,
    code: 0,
  });
  const submitHandler = useCallback(
    (e: React.FormEvent<HTMLFormElement>) => {
      e.preventDefault();
      setLoading(true);
      companyAuthentication(form)
        .then((res) => {
          message.success("提交成功");
        })
        .finally(() => {
          setLoading(false);
        });
    },
    [form]
  );

  const createFieldProps = (
    name: keyof FormValue
  ): React.ComponentProps<typeof TextField> => {
    return {
      fullWidth: true,
      name,
      value: form[name],
      onChange: (e) => {
        setForm((state) => ({
          ...state,
          [name]: e.target.value,
        }));
      },
    };
  };

  return (
    <Box
      component="form"
      sx={{
        "& .MuiFormControl-root": { mb: 3 },
      }}
      style={{ maxWidth: 500 }}
      onSubmit={submitHandler}
    >
      <TextField
        {...createFieldProps("company_name")}
        label="企业名称"
        required
      />

      <TextField
        {...createFieldProps("certificates_type")}
        label="企业证件类型"
        required
        select
        onChange={(e) => {
          setForm((state) => ({
            ...state,
            certificates_type: Number(e.target.value),
          }));
        }}
      >
        {Object.values(COMPANY_CER).map((option) => (
          <MenuItem key={option.value} value={option.value}>
            {option.cname}
          </MenuItem>
        ))}
      </TextField>
      <FormControl>
        <UploadFile
          label="企业证件附件"
          value={form.certificates_url}
          onChange={(value) => {
            setForm((state) => ({
              ...state,
              certificates_url: value,
            }));
          }}
        />
      </FormControl>
      <TextField
        {...createFieldProps("legal_person")}
        label="法定代表人"
        required
      />
      <TextField
        {...createFieldProps("legal_id_card")}
        label="法定代表人身份证号"
        required
      />
      <TextField
        {...createFieldProps("legal_phone")}
        label="法定代表人手机号码"
        required
      />
      <TextField
        fullWidth
        label="当前手机号"
        required
        value={userInfo?.phone || ""}
        inputProps={{ readOnly: true }}
      />
      <FormControl fullWidth required>
        <ValidateCodeInput
          label="验证码"
          value={form.code || ""}
          phone={userInfo?.phone || ""}
          sendType={V_CODE_SEND.COMPANY_AUTH.value}
          onChange={(e) => {
            setForm((state) => ({
              ...state,
              code: Number(e.target.value),
            }));
          }}
        ></ValidateCodeInput>
      </FormControl>
      <Button variant="contained" type="submit" disabled={loading}>
        认 证
      </Button>
    </Box>
  );
}

export default Company;
