import { Button, 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";
import Form from "../../../components/Form";
import { useFormPage } from "../../../components/Form/useFormPage";

interface IProps {
  userInfo?: UserInfo;
}

type FormValue = CompanyAuthRequestBody;

function Company({ userInfo }: IProps) {
  const { loading, form, submitHandler, setForm, createFieldProps } =
    useFormPage<FormValue>({
      defaultValue: {
        company_name: "",
        certificates_type: 1,
        legal_person: "",
        certificates_url: "",
        legal_id_card: "",
        legal_phone: 0,
        code: 0,
      },
      submitRequest: (form) => {
        return companyAuthentication(form).then((res) => {
          message.success("提交成功");
        });
      },
      fieldProps: {
        required: true,
      },
    });

  return (
    <Form style={{ maxWidth: 500 }} onSubmit={submitHandler}>
      <TextField {...createFieldProps("company_name")} label="企业名称" />
      <TextField
        {...createFieldProps("certificates_type")}
        label="企业证件类型"
        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 required>
        <UploadFile
          label="企业证件附件"
          value={form.certificates_url}
          onChange={(value) => {
            setForm((state) => ({
              ...state,
              certificates_url: value,
            }));
          }}
        />
      </FormControl>
      <TextField {...createFieldProps("legal_person")} label="法定代表人" />
      <TextField
        {...createFieldProps("legal_id_card")}
        label="法定代表人身份证号"
      />
      <TextField
        {...createFieldProps("legal_phone")}
        value={form.legal_phone || ""}
        label="法定代表人手机号码"
      />
      <TextField
        fullWidth
        label="当前手机号"
        value={userInfo?.phone || ""}
        inputProps={{ readOnly: true }}
      />
      <FormControl fullWidth>
        <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>
      <div>
        <Button variant="contained" type="submit" disabled={loading}>
          认 证
        </Button>
      </div>
    </Form>
  );
}

export default Company;
