import { Button, Input, Modal, Typography } from "antd";
import moment from "moment";
import React, { 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: moment(
        `20${decodedBarcode.expiration_date}${moment(
          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: moment(decodedBarcode.birthday),
    };

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

  return (
    <div>
      <Modal
        visible={modalVisible}
        okText={t("contracts.actions.senddltoform")}
        onOk={handleInsertForm}
        okButtonProps={{ disabled: !!!decodedBarcode }}
        onCancel={handleCancel}
      >
        <div>
          <div>
            <Input
              autoFocus
              allowClear
              onChange={(e) => {
                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")}>
                  {moment(
                    `20${decodedBarcode.expiration_date}${moment(
                      decodedBarcode.birthday
                    ).format("DD")}`
                  ).format("MM/DD/YYYY")}
                </DataLabel>
                <DataLabel label={t("contracts.fields.driver_dob")}>
                  {moment(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>
  );
}