import { Button, Input, Modal, Typography } from "antd";
import dayjs from "../../utils/day";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import aamva from "../../utils/aamva";
import DataLabel from "../data-label/data-label.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component";
import { logImEXEvent } from "../../firebase/firebase.utils";

export default function ContractLicenseDecodeButton({ form }) {
  const { t } = useTranslation();
  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [decodedBarcode, setDecodedBarcode] = useState(null);

  const handleDecode = (e) => {
    logImEXEvent("contract_license_decode");
    setLoading(true);
    const aamvaParse = aamva.parse(e.currentTarget.value);
    setDecodedBarcode(aamvaParse);
    setLoading(false);
  };

  const handleInsertForm = () => {
    logImEXEvent("contract_license_decode_fill_form");

    const values = {
      driver_dlnumber: decodedBarcode.dl,
      driver_dlexpiry: dayjs(`20${decodedBarcode.expiration_date}${dayjs(decodedBarcode.birthday).format("DD")}`),
      driver_dlst: decodedBarcode.state,
      driver_fn: decodedBarcode.name.first,
      driver_ln: decodedBarcode.name.last,
      driver_addr1: decodedBarcode.address,
      driver_city: decodedBarcode.city,
      driver_state: decodedBarcode.state,
      driver_zip: decodedBarcode.postal_code,
      driver_dob: dayjs(decodedBarcode.birthday)
    };

    form.setFieldsValue(values);
    setModalVisible(false);
    setDecodedBarcode(null);
  };
  const handleClick = () => {
    setModalVisible(true);
  };
  const handleCancel = () => {
    setModalVisible(false);
  };

  return (
    <div>
      <Modal
        open={modalVisible}
        okText={t("contracts.actions.senddltoform")}
        onOk={handleInsertForm}
        okButtonProps={{ disabled: !decodedBarcode }}
        onCancel={handleCancel}
      >
        <div>
          <div>
            <Input
              autoFocus
              allowClear
              onChange={() => {
                if (!loading) setLoading(true);
              }}
              onPressEnter={handleDecode}
            />
          </div>
          <LoadingSkeleton loading={loading}>
            {decodedBarcode ? (
              <div>
                <DataLabel label={t("contracts.fields.driver_dlst")}>{decodedBarcode.state}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_dlnumber")}>{decodedBarcode.dl}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_fn")}>{decodedBarcode.name.first}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_ln")}>{decodedBarcode.name.last}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_addr1")}>{decodedBarcode.address}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_addr2")}>{decodedBarcode.address}</DataLabel>
                <DataLabel label={t("contracts.fields.driver_dlexpiry")}>
                  {dayjs(`20${decodedBarcode.expiration_date}${dayjs(decodedBarcode.birthday).format("DD")}`).format(
                    "MM/DD/YYYY"
                  )}
                </DataLabel>
                <DataLabel label={t("contracts.fields.driver_dob")}>
                  {dayjs(decodedBarcode.birthday).format("MM/DD/YYYY")}
                </DataLabel>
                <div>
                  <Typography.Title level={4}>{t("contracts.labels.correctdataonform")}</Typography.Title>
                </div>
              </div>
            ) : (
              <div>{t("contracts.labels.waitingforscan")}</div>
            )}
          </LoadingSkeleton>
        </div>
      </Modal>
      <Button onClick={handleClick}>{t("contracts.actions.decodelicense")}</Button>
    </div>
  );
}
