import { memo, useCallback, useState, useMemo } from "react";
import {
  Card,
  Input,
  InputPassword,
  Button,
  Box,
  InputTextArea,
} from "components/Common";
import {
  Typography,
  Form,
  Divider,
  Checkbox,
  Select,
  Row,
  Col,
  Modal,
} from "antd";
import styled, { css } from "styled-components";
import { AtSign, User, MapPin } from "react-feather";
import { Upload as UploadIcon } from "react-feather";
import { useTranslation } from "react-i18next";
import axios from "axios";
import { toast } from "react-hot-toast";
import countryList from "react-select-country-list";
import usePath from "hooks/usePath";
import UploadButton from "components/UploadButton";
import LoadImage from "components/LoadImage";

const ExhibitorRegisterForm = memo(() => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const countryOptions = useMemo(() => countryList().getData(), []);
  const [businessType, setBusinessType] = useState<any>("");
  const { goToPath } = usePath();
  const [userToken, setUserToken] = useState<string>();
  const [userId, setUserId] = useState();
  const [hasUploadLogo, setHasUploadLogo] = useState(false);
  const [hasUploadThumbnail, setHasUploadThumbnail] = useState(true);
  const [hasUploadPoster1, setHasUploadPoster1] = useState(false);
  const [hasUploadPoster2, setHasUploadPoster2] = useState(false);
  const [hasUploadPoster3, setHasUploadPoster3] = useState(false);
  const [hasUploadPoster4, setHasUploadPoster4] = useState(false);
  const [hasUploadPoster5, setHasUploadPoster5] = useState(false);

  const validatePassword = useCallback(
    (rule: any, value: any, callback: any) => {
      const password = form.getFieldValue("password");
      if (value && value !== password) {
        callback("Password do not match!");
      } else {
        callback();
      }
    },
    [form]
  );

  const handleRegister = useCallback(async (data) => {
    setLoading(true);
    try {
      const { data: res } = await axios.post("/exibitors/register", {
        email: data.email,
        password: data.password,
        company: data.companyName,
        contact_title: data.title,
        contact_name: data.contractName,
        contact_position: data.contractPosition,
        website: data.companyWebsite,
        business_type: data.otherBusinessType || data.businessType,
        business_overview: data.businessOverview,
        keywords: data.keyword.toString(),
        address: data.address,
        province: data.province,
        country: data.country,
        postcode: data.postode,
        contract_phone_number: data.contractPhone,
        company_phone_number: data.companyPhone,
        line_id: data.contractLine,
        template_id: 1,
        package_id: 1,
        terms_agreed: data.policyCheck,
        subscription: data.subscriptionCheck || 0,
        corporateVDOLink: data.corporateVDOLink,
        companyIntrocutionTH: data.companyIntrocutionTH,
        companyIntrocutionEN: data.companyIntrocutionEN,
        // productTH: data.productTH,
        // productEN: data.productEN,
      });
      toast.success("Registration successfully!");
      setUserToken(res.token);
      setUserId(res.exibitor_id);
    } catch (error: any) {
      if (error.response.status === 406) {
        toast.error("This email address is already being used");
      } else {
        toast.error("Registration failed! Please try again later.");
      }
      setLoading(false);
    }
  }, []);

  return (
    <>
      <Form
        style={{ width: "100%", height: "100%" }}
        layout="vertical"
        form={form}
        onFinish={handleRegister}
      >
        <Card
          padding="20px"
          direction="column"
          height="auto"
          margin_bottom="20px"
        >
          <Typography.Title level={4}>
            {t("REGISTER.EXHIBITOR_TITLE")}
          </Typography.Title>

          <Typography.Paragraph>
            <p>{t("REGISTER.EXHIBITOR_DES_1")}</p>
            <p>{t("REGISTER.EXHIBITOR_DES_2")}</p>
            <p><b>{t("REGISTER.EXHIBITOR_DES_3")}</b></p>
            <p>{t("REGISTER.EXHIBITOR_DES_4")}</p>
            <p>{t("REGISTER.EXHIBITOR_DES_5")}</p>
          </Typography.Paragraph>

          <Typography.Paragraph style={{ color: "var(--danger)" }}>
            * {t("REGISTER.REQUIRED")}
          </Typography.Paragraph>
        </Card>

        <Card
          padding="20px"
          direction="column"
          height="auto"
          hideBorderTop
          margin_bottom="20px"
        >
          <Box align="center">
            <AtSign
              size={30}
              style={{
                marginRight: "10px",
                color: "var(--secondary)",
                backgroundColor: "var(--primary)",
                border: "2px solid var(--primary)",
                borderRadius: "var(--border-radius-circle)",
                padding: "5px",
              }}
            />
            <Typography.Title level={5} style={{ margin: 0 }}>
              {t("REGISTER.ACCOUNT")}
            </Typography.Title>
          </Box>
          <Divider style={{ marginTop: "10px" }} />

          <FormItem
            name="email"
            label={t("REGISTER.EMAIL")}
            rules={[
              {
                required: true,
                type: "email",
                message: "Please input your email",
              },
              ({ getFieldValue }) => ({
                validator() {
                  if (
                    getFieldValue("email") !==
                    getFieldValue("email").toLowerCase()
                  ) {
                    return Promise.reject(
                      new Error(
                        "Please input your email with lower cases [a-z] only"
                      )
                    );
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input placeholder={t("REGISTER.EMAIL")} />
          </FormItem>
          <FormItem
            name="confirmEmail"
            label={t("REGISTER.CONFIRMEMAIL")}
            rules={[
              {
                required: true,
                type: "email",
                message: "Please input your email",
              },
              ({ getFieldValue }) => ({
                validator() {
                  if (
                    getFieldValue("email") !== getFieldValue("confirmEmail")
                  ) {
                    return Promise.reject(
                      new Error("Email confirmation does not match")
                    );
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input placeholder={t("REGISTER.CONFIRMEMAIL")} />
          </FormItem>

          <FormItem
            name="password"
            label={t("REGISTER.PASSWORD")}
            rules={[
              {
                required: true,
                message: "Please input your password",
              },
            ]}
          >
            <InputPassword placeholder={t("REGISTER.PASSWORD")} />
          </FormItem>

          <FormItem
            name="confirmPassword"
            label={t("REGISTER.CONFIRM_PASSWORD")}
            rules={[
              {
                required: true,
                message: "Please input your password",
              },
              { validator: validatePassword },
            ]}
          >
            <InputPassword placeholder={t("REGISTER.CONFIRM_PASSWORD")} />
          </FormItem>
        </Card>

        <Card
          padding="20px"
          direction="column"
          height="auto"
          hideBorderTop
          margin_bottom="20px"
        >
          <Box align="center">
            <User
              size={30}
              style={{
                marginRight: "10px",
                color: "var(--secondary)",
                backgroundColor: "var(--primary)",
                border: "2px solid var(--primary)",
                borderRadius: "var(--border-radius-circle)",
                padding: "5px",
              }}
            />
            <Typography.Title level={5} style={{ margin: 0 }}>
              {t("REGISTER.PROFILE")}
            </Typography.Title>
          </Box>
          <Divider style={{ marginTop: "10px" }} />

          <Row gutter={[10, 0]}>
            <Col flex="100px">
              <FormItem
                name="title"
                label={t("REGISTER.TITLE")}
                rules={[
                  {
                    required: true,
                    message: "Please select your title",
                  },
                ]}
              >
                <Select placeholder={t("REGISTER.TITLE")}>
                  <Select.Option value="mr.">
                    {t("REGISTER.TITLE_TYPE.MR")}
                  </Select.Option>
                  <Select.Option value="ms.">
                    {t("REGISTER.TITLE_TYPE.MS")}
                  </Select.Option>
                  <Select.Option value="mrs.">
                    {t("REGISTER.TITLE_TYPE.MRS")}
                  </Select.Option>
                  <Select.Option value="other">
                    {t("REGISTER.OTHER")}
                  </Select.Option>
                </Select>
              </FormItem>
            </Col>

            <Col flex="auto">
              <FormItem
                name="contractName"
                label={t("REGISTER.CONTRACT_NAME")}
                rules={[
                  {
                    required: true,
                    message: "Please input your full name",
                  },
                ]}
              >
                <Input placeholder={t("REGISTER.CONTRACT_NAME")} />
              </FormItem>
            </Col>
          </Row>

          <FormItem
            name="contractPosition"
            label={t("REGISTER.POSITION")}
            rules={[
              {
                required: true,
                message: "Please input your positopn",
              },
            ]}
          >
            <Input placeholder={t("REGISTER.POSITION")} />
          </FormItem>

          <FormItem
            name="contractPhone"
            label={t("REGISTER.CONTRACT_PHONE_NUMBER")}
            rules={[
              {
                required: true,
                message: "Please input your phone number",
              },
              {
                max: 14,
                message: "Please input your phone number maximum 15 digits",
              },
              ({ getFieldValue }) => ({
                validator() {
                  if (!/^[0-9+]*$/.test(getFieldValue("contractPhone"))) {
                    return Promise.reject(
                      new Error(
                        "Please input your phone number with [0-9] or + only"
                      )
                    );
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input placeholder={t("REGISTER.CONTRACT_PHONE_NUMBER")} />
          </FormItem>

          <FormItem name="contractLine" label={t("REGISTER.CONTRACT_LINE_ID")}>
            <Input placeholder={t("REGISTER.CONTRACT_LINE_ID")} />
          </FormItem>
        </Card>

        <Card
          padding="20px"
          direction="column"
          height="auto"
          hideBorderTop
          margin_bottom="20px"
        >
          <Box align="center">
            <MapPin
              size={30}
              style={{
                marginRight: "10px",
                color: "var(--secondary)",
                backgroundColor: "var(--primary)",
                border: "2px solid var(--primary)",
                borderRadius: "var(--border-radius-circle)",
                padding: "5px",
              }}
            />
            <Typography.Title level={5} style={{ margin: 0 }}>
              {t("REGISTER.COMPANY")}
            </Typography.Title>
          </Box>
          <Divider style={{ marginTop: "10px" }} />

          <FormItem
            name="companyName"
            label={t("REGISTER.COMPANY_NAME")}
            rules={[
              {
                required: true,
                message: "Please input your company",
              },
            ]}
          >
            <Input placeholder={t("REGISTER.COMPANY_NAME")} />
          </FormItem>

          <FormItem
            name="companyIntrocutionTH"
            label={`${t("REGISTER.BUSINESS_OVERVIEW")} (ภาษาไทย)`}
          >
            <InputTextArea
              autoSize={{ minRows: 2 }}
              placeholder={`${t("REGISTER.BUSINESS_OVERVIEW")} (ภาษาไทย)`}
            />
          </FormItem>

          <FormItem
            name="companyIntrocutionEN"
            label={`${t("REGISTER.BUSINESS_OVERVIEW")} (English)`}
          >
            <InputTextArea
              autoSize={{ minRows: 2 }}
              placeholder={`${t("REGISTER.BUSINESS_OVERVIEW")} (English)`}
            />
          </FormItem>

          <FormItem
            name="businessType"
            label={t("REGISTER.TYPE_OF_BUSINESS")}
            rules={[
              {
                required: true,
                message: "Please select your business type",
              },
            ]}
          >
            <Select
              placeholder={t("REGISTER.TYPE_OF_BUSINESS")}
              onSelect={(e) => setBusinessType(e)}
            >
              <Select.Option value="Automobiles and Components">
                {t("REGISTER.BUSINESS_TYPE.AUTOMOBILES_AND_COMPONENTS")}
              </Select.Option>
              <Select.Option value="Banks">
                {t("REGISTER.BUSINESS_TYPE.BANKS")}
              </Select.Option>
              <Select.Option value="Capital Goods">
                {t("REGISTER.BUSINESS_TYPE.CAPITAL_GOODS")}
              </Select.Option>
              <Select.Option value="Commercial and Professional Services">
                {t(
                  "REGISTER.BUSINESS_TYPE.COMMERCIAL_AND_PROFESSIONAL_SERVICES"
                )}
              </Select.Option>
              <Select.Option value="Consumer Durables and Apparel">
                {t("REGISTER.BUSINESS_TYPE.CONSUMER_DURABLES_AND_APPAREL")}
              </Select.Option>
              <Select.Option value="Consumer Services">
                {t("REGISTER.BUSINESS_TYPE.CONSUMER_SERVICES")}
              </Select.Option>
              <Select.Option value="Diversified Financials">
                {t("REGISTER.BUSINESS_TYPE.DIVERSIFIED_FINANCIALS")}
              </Select.Option>
              <Select.Option value="Education">
                {t("REGISTER.BUSINESS_TYPE.EDUCATION")}
              </Select.Option>
              <Select.Option value="Energy">
                {t("REGISTER.BUSINESS_TYPE.ENERGY")}
              </Select.Option>
              <Select.Option value="Food, Beverage, and Tobacco">
                {t("REGISTER.BUSINESS_TYPE.FOOD_BEVERAGE_AND_TOBACCO")}
              </Select.Option>
              <Select.Option value="Food and Staples Retailing">
                {t("REGISTER.BUSINESS_TYPE.FOOD_AND_STAPLES_RETAILING")}
              </Select.Option>
              <Select.Option value="Health Care Equipment and Services">
                {t("REGISTER.BUSINESS_TYPE.HEALTH_CARE_EQUIPMENT_AND_SERVICES")}
              </Select.Option>
              <Select.Option value="Household and Personal Products">
                {t("REGISTER.BUSINESS_TYPE.HOUSEHOLD_AND_PERSONAL_PRODUCTS")}
              </Select.Option>
              <Select.Option value="Insurance">
                {t("REGISTER.BUSINESS_TYPE.INSURANCE")}
              </Select.Option>
              <Select.Option value="Materials">
                {t("REGISTER.BUSINESS_TYPE.MATERIALS")}
              </Select.Option>
              <Select.Option value="Media and Entertainment">
                {t("REGISTER.BUSINESS_TYPE.MEDIA_AND_ENTERTAINMENT")}
              </Select.Option>
              <Select.Option value="Pharmaceuticals, Biotechnology, and Life -Sciences">
                {t(
                  "REGISTER.BUSINESS_TYPE.PHARMACEUTICALS_BIOTECHNOLOGY_AND_LIFE-SCIENCES"
                )}
              </Select.Option>
              <Select.Option value="Real Estate">
                {t("REGISTER.BUSINESS_TYPE.REAL_ESTATE")}
              </Select.Option>
              <Select.Option value="Retailing">
                {t("REGISTER.BUSINESS_TYPE.RETAILING")}
              </Select.Option>
              <Select.Option value="Semiconductors and Semiconductor -Equipment">
                {t(
                  "REGISTER.BUSINESS_TYPE.SEMICONDUCTORS_AND_SEMICONDUCTOR-EQUIPMENT"
                )}
              </Select.Option>
              <Select.Option value="Software and Services">
                {t("REGISTER.BUSINESS_TYPE.SOFTWARE_AND_SERVICES")}
              </Select.Option>
              <Select.Option value="Technology Hardware and Equipment">
                {t("REGISTER.BUSINESS_TYPE.TECHNOLOGY_HARDWARE_AND_EQUIPMENT")}
              </Select.Option>
              <Select.Option value="Telecommunication Services">
                {t("REGISTER.BUSINESS_TYPE.TELECOMMUNICATION_SERVICES")}
              </Select.Option>
              <Select.Option value="Transportation">
                {t("REGISTER.BUSINESS_TYPE.TRANSPORTATION")}
              </Select.Option>
              <Select.Option value="Utilities">
                {t("REGISTER.BUSINESS_TYPE.UTILITIES")}
              </Select.Option>
              <Select.Option value="Other">{t("REGISTER.OTHER")}</Select.Option>
            </Select>
          </FormItem>

          {businessType === "Other" ? (
            <FormItem
              name="otherBusinessType"
              label={t("REGISTER.TYPE_OF_BUSINESS")}
              rules={[
                {
                  required: true,
                  message: "Please input your business type",
                },
              ]}
            >
              <Input placeholder={t("REGISTER.TYPE_OF_BUSINESS")} />
            </FormItem>
          ) : (
            ""
          )}

          <FormItem
            name="keyword"
            label={t("REGISTER.KEYWORDS")}
            rules={[
              {
                required: true,
                message: "Please input your keyword",
              },
            ]}
          >
            <Select
              mode="tags"
              tokenSeparators={[","]}
              placeholder="i.e. medical devices, canabis, medical mask"
            />
          </FormItem>

          <FormItem
            name="companyWebsite"
            label={t("REGISTER.WEBSITE")}
            rules={[
              {
                type: "url",
                message: "This field must be a valid url.",
              },
            ]}
          >
            <Input placeholder={t("REGISTER.WEBSITE")} />
          </FormItem>

          <FormItem
            name="corporateVDOLink"
            label={t("REGISTER.CORPORATE_LINK")}
            rules={[
              {
                type: "url",
                message: "This field must be a valid url.",
              },
            ]}
          >
            <Input placeholder={t("REGISTER.CORPORATE_LINK")} />
          </FormItem>

          <FormItem
            name="companyPhone"
            label={t("REGISTER.COMPANY_PHONE_NUMBER")}
            rules={[
              {
                max: 14,
                message: "Please input your phone number maximum 15 digits",
              },
              ({ getFieldValue }) => ({
                validator() {
                  if (!/^[0-9+]*$/.test(getFieldValue("companyPhone"))) {
                    return Promise.reject(
                      new Error(
                        "Please input your phone number with [0-9] or + only"
                      )
                    );
                  }
                  return Promise.resolve();
                },
              }),
            ]}
          >
            <Input placeholder={t("REGISTER.COMPANY_PHONE_NUMBER")} />
          </FormItem>

          <FormItem
            name="address"
            label={t("REGISTER.ADDRESS")}
            rules={[
              {
                required: true,
                message: "Please input your company address",
              },
            ]}
          >
            <InputTextArea
              autoSize={{ minRows: 2 }}
              placeholder={t("REGISTER.ADDRESS")}
            />
          </FormItem>

          <FormItem name="province" label={t("REGISTER.PROVINCE")}>
            <Input placeholder={t("REGISTER.PROVINCE")} />
          </FormItem>

          <FormItem
            name="postode"
            label={t("REGISTER.POSTCODE")}
            rules={[
              {
                required: true,
                message: "Please input your company postcode",
              },
            ]}
          >
            <Input placeholder={t("REGISTER.POSTCODE")} />
          </FormItem>

          <FormItem
            name="country"
            label={t("REGISTER.COUNTRY")}
            rules={[
              {
                required: true,
                message: "Please input your company country",
              },
            ]}
          >
            <Select placeholder={t("REGISTER.COUNTRY")}>
              {countryOptions.map((option) => {
                if (option.value === "TW") {
                  return (
                    <Select.Option key={option.value} value={option.value}>
                      Taiwan
                    </Select.Option>
                  );
                } else {
                  return (
                    <Select.Option key={option.value} value={option.value}>
                      {option.label}
                    </Select.Option>
                  );
                }
              })}
            </Select>
          </FormItem>
        </Card>

        {/* <Card
          padding="20px"
          direction="column"
          height="auto"
          hideBorderTop
          margin_bottom="20px"
        >
          <Typography.Title
            level={5}
            style={{ margin: 0, marginBottom: "10px" }}
          >
            {t("REGISTER.PRODUCT")}
          </Typography.Title>
          <Typography.Paragraph style={{ margin: 0 }}>
            {t("REGISTER.PRODUCT_DES")}
          </Typography.Paragraph>
          <Divider style={{ marginTop: "10px" }} />

          <FormItem name="productTH" label="ภาษาไทย (THAI)">
            <InputTextArea autoSize={{ minRows: 2 }} />
          </FormItem>

          <FormItem name="productEN" label="English">
            <InputTextArea autoSize={{ minRows: 2 }} />
          </FormItem>
        </Card> */}

        <FormItem name="subscriptionCheck" valuePropName="checked">
          <Checkbox>{t("REGISTER.ACCEPT_NEWS")}</Checkbox>
        </FormItem>

        <FormItem
          name="policyCheck"
          valuePropName="checked"
          rules={[
            {
              validator: (rule, value, callback) => {
                value ? callback() : callback("");
              },
            },
          ]}
        >
          <Checkbox>
            {t("REGISTER.ACCEPT_POLICY_1")}{" "}
            <span>
              <a href="https://online.cn-ves.com/Meta-EX/PDPA/Policy%20of%20META-EX%20VIRTUAL%20EXHIBITION%20PLATFORM.pdf" target="_blank" rel="noreferrer">(click)</a>
            </span>{" "}
            {t("REGISTER.ACCEPT_POLICY_2")}{" "}
            <span style={{ color: "var(--danger)" }}>*</span>
          </Checkbox>
        </FormItem>

        <FormItem shouldUpdate>
          {() => (
            <Button
              size="large"
              disabled={
                form.getFieldsError().filter(({ errors }) => errors.length)
                  .length > 0
              }
              loading={loading}
              type="primary"
              htmlType="submit"
              margin_bottom="40px"
            >
              {t("AUTH.REGISTER")}
            </Button>
          )}
        </FormItem>
      </Form>

      <Modal
        visible={userToken !== undefined}
        footer={false}
        closable={false}
        maskClosable={false}
        title={
          <>
            <UploadIcon
              size={30}
              style={{
                marginRight: "10px",
                color: "var(--primary)",
                backgroundColor: "var(--secondary)",
                border: "2px solid var(--primary)",
                borderRadius: "var(--border-radius-circle)",
                padding: "5px",
              }}
            />
            <Typography.Title level={5} style={{ margin: 0 }}>
              {t("REGISTER.UPLOAD_ASSETS")}
            </Typography.Title>
          </>
        }
      >
        {/* Upload Logo */}
        <Box direction="column" height="auto">
          <Label>{t("REGISTER.UPLOAD_LOGO")}</Label>
          {hasUploadLogo ? (
            <LoadImage
              src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/logo`}
            />
          ) : (
            ""
          )}
          <UploadButton
            title={
              hasUploadLogo ? t("BUTTON.CHANGE_FILE") : t("BUTTON.ADD_FILE")
            }
            name="logo"
            headers={{
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${userToken}`,
            }}
            fallback={() => {
              setHasUploadLogo(true);
            }}
            onUpload={() => {
              setHasUploadLogo(false);
            }}
          />
        </Box>
        {/* Upload Thumbnail */}
        <Box direction="column" height="auto">
          <Label>{t("REGISTER.UPLOAD_THUMBNAIL")}</Label>
          {hasUploadThumbnail ? (
            <LoadImage
              src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/thumbnail`}
            />
          ) : (
            ""
          )}
          <UploadButton
            title={
              hasUploadThumbnail
                ? t("BUTTON.CHANGE_FILE")
                : t("BUTTON.ADD_FILE")
            }
            name="thumbnail"
            headers={{
              "Content-Type": "multipart/form-data",
              Authorization: `Bearer ${userToken}`,
            }}
            fallback={() => {
              setHasUploadThumbnail(true);
            }}
            onUpload={() => {
              setHasUploadThumbnail(false);
            }}
          />
        </Box>

        <Divider />

        <Box direction="column" height="auto">
          <Label>
            {t("REGISTER.UPLOAD_POSTER")}{" "}
            <Typography.Link
              onClick={() => {
                goToPath({
                  pathname: "https://www.google.com/",
                  target: "_blank",
                });
              }}
            >
              https://www.google.com/
            </Typography.Link>
          </Label>

          {/* poster 1 */}
          <>
            <Typography.Text style={{ marginTop: "24px" }}>
              Poster 1:
            </Typography.Text>
            {hasUploadPoster1 ? (
              <LoadImage
                src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/poster_01`}
              />
            ) : (
              ""
            )}
            <UploadButton
              title={
                hasUploadPoster1
                  ? t("BUTTON.CHANGE_FILE")
                  : t("BUTTON.ADD_FILE")
              }
              name="poster_01"
              headers={{
                "Content-Type": "multipart/form-data",
                Authorization: `Bearer ${userToken}`,
              }}
              fallback={() => {
                setHasUploadPoster1(true);
              }}
              onUpload={() => {
                setHasUploadPoster1(false);
              }}
            />
          </>

          {/* poster 2 */}
          <>
            <Typography.Text style={{ marginTop: "24px" }}>
              Poster 2:
            </Typography.Text>
            {hasUploadPoster2 ? (
              <LoadImage
                src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/poster_02`}
              />
            ) : (
              ""
            )}
            <UploadButton
              title={
                hasUploadPoster2
                  ? t("BUTTON.CHANGE_FILE")
                  : t("BUTTON.ADD_FILE")
              }
              name="poster_02"
              headers={{
                "Content-Type": "multipart/form-data",
                Authorization: `Bearer ${userToken}`,
              }}
              fallback={() => {
                setHasUploadPoster2(true);
              }}
              onUpload={() => {
                setHasUploadPoster2(false);
              }}
            />
          </>

          {/* poster 3 */}
          <>
            <Typography.Text style={{ marginTop: "24px" }}>
              Poster 3:
            </Typography.Text>
            {hasUploadPoster3 ? (
              <LoadImage
                src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/poster_03`}
              />
            ) : (
              ""
            )}
            <UploadButton
              title={
                hasUploadPoster3
                  ? t("BUTTON.CHANGE_FILE")
                  : t("BUTTON.ADD_FILE")
              }
              name="poster_03"
              headers={{
                "Content-Type": "multipart/form-data",
                Authorization: `Bearer ${userToken}`,
              }}
              fallback={() => {
                setHasUploadPoster3(true);
              }}
              onUpload={() => {
                setHasUploadPoster3(false);
              }}
            />
          </>

          {/* poster 4 */}
          <>
            <Typography.Text style={{ marginTop: "24px" }}>
              Poster 4:
            </Typography.Text>
            {hasUploadPoster4 ? (
              <LoadImage
                src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/poster_04`}
              />
            ) : (
              ""
            )}
            <UploadButton
              title={
                hasUploadPoster4
                  ? t("BUTTON.CHANGE_FILE")
                  : t("BUTTON.ADD_FILE")
              }
              name="poster_04"
              headers={{
                "Content-Type": "multipart/form-data",
                Authorization: `Bearer ${userToken}`,
              }}
              fallback={() => {
                setHasUploadPoster4(true);
              }}
              onUpload={() => {
                setHasUploadPoster4(false);
              }}
            />
          </>

          {/* poster 5 */}
          <>
            <Typography.Text style={{ marginTop: "24px" }}>
              Poster 5:
            </Typography.Text>
            {hasUploadPoster5 ? (
              <LoadImage
                src={`${process.env.REACT_APP_STORAGE_URL}/exhibitor/${userId}/booth/poster_05`}
              />
            ) : (
              ""
            )}
            <UploadButton
              title={
                hasUploadPoster5
                  ? t("BUTTON.CHANGE_FILE")
                  : t("BUTTON.ADD_FILE")
              }
              name="poster_05"
              headers={{
                "Content-Type": "multipart/form-data",
                Authorization: `Bearer ${userToken}`,
              }}
              fallback={() => {
                setHasUploadPoster5(true);
              }}
              onUpload={() => {
                setHasUploadPoster5(false);
              }}
            />
          </>
        </Box>

        <Button
          type="primary"
          margin_top="24px"
          // disabled={
          //   !(
          //     hasUploadLogo &&
          //     hasUploadPoster1 &&
          //     hasUploadPoster2 &&
          //     hasUploadPoster3
          //   )
          // }
          onClick={() => {
            localStorage.setItem("verify", "/login/exhibitor");
            goToPath({ pathname: "/verify" });
          }}
        >
          {t("REGISTER.NEXT")}
        </Button>
      </Modal>
    </>
  );
});

const FormItem = styled(Form.Item)`
  width: 100%;
`;

const Label = styled(Typography.Text)<any>`
  padding-bottom: 8px;

  ${(props) => {
    if (props.required) {
      return css`
        &:before {
          display: inline-block;
          margin-right: 4px;
          color: #ff4d4f;
          font-size: 14px;
          font-family: SimSun, sans-serif;
          line-height: 1;
          content: "*";
        }
      `;
    }
  }}
`;

export default ExhibitorRegisterForm;