import React, { useEffect } from 'react';
import * as Dialog from '@radix-ui/react-dialog';
import PartnerLoadContainer from './partnerLoadContainer';
import { ratesConstants } from './ratesConstants';
import { CloseIconSvg } from '../../assets/svg/closeIconSvg';

const {
  bookImg,
  loadImg,
  bookIndentUrl,
  utmOrganic,
  truckRatesPath,
} = ratesConstants;

const BookTruckDialog = (props: any) => {
  const { queryData, utmSource, translatedWords } = props;
  const {
    imShipper = "I'm Shipper",
    imTruckOwner = "I'm Truck Owner",
    bookTruckLorry = 'Book Truck/Lorry',
    findLoad = 'Find Load',
    bookTruck = 'Book Truck',
  } = translatedWords || {};

  const [open, setOpen] = React.useState(false);
  const [loads, setLoads] = React.useState(false);

  useEffect(() => {
    setLoads(false);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [open]);

  const buttonData = [
    {
      id: 1,
      name: imShipper,
      find: bookTruckLorry,
      img: bookImg,
      isCustomer: true,
      height: 45,
      width: 45,
    },
    {
      id: 2,
      name: imTruckOwner,
      find: findLoad,
      img: loadImg,
      isCustomer: false,
      height: 47,
      width: 47,
    },
  ];

  const onClose = () => setOpen(false);
  const showLoads = () => setLoads(true);

  const queryParam = `?ext=true&s_id=${queryData?.s_id}&s_n=${queryData?.s_n}&sb_id=${queryData?.sb_id}&d_id=${queryData?.d_id}&d_n=${queryData?.d_n}&db_id=${queryData?.db_id}&t_id=${queryData?.t_id}&t_n=${queryData?.t_n}&mt=${queryData?.mt}`;

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger asChild>
        <button className="fr-rate-btn fr-flex fr-items-center fr-rounded-full fr-m-0">
          <span className='fr-text-xs fr-text-white'>{bookTruck}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="m9 18 6-6-6-6" />
          </svg>
        </button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fr-DialogOverlay" />
        <Dialog.Content className="fr-DialogContent">
          {loads ? (
            <PartnerLoadContainer utmSource={utmSource} translatedWords={translatedWords} />
          ) : (
            <>
              <div onClick={onClose}>
                <a
                  title={bookTruck}
                  target="_blank"
                  href={`${bookIndentUrl}${queryParam}&path=${truckRatesPath}&${utmSource ||
                    utmOrganic}`}
                  rel="noreferrer"
                  className="fr-DialogAction"
                >
                  <SelectButton buttonProps={buttonData[0]} />
                </a>
              </div>
              <div className="fr-DialogAction" onClick={showLoads}>
                <SelectButton buttonProps={buttonData[1]} />
              </div>
            </>
          )}
          <Dialog.Close asChild>
            <button className="fr-IconButton" aria-label="Close">
              <CloseIconSvg />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
};

export default BookTruckDialog;

const SelectButton = (props: any) => {
  const { buttonProps } = props;
  return (
    <>
      <span className="fr-bg-white fr-rounded-full fr-p-1 fr-mr-3 fr-inline-block">
        <picture>
          <img
            src={buttonProps.img}
            alt={buttonProps.find}
            width={buttonProps.width}
            height={buttonProps.height}
          />
        </picture>
      </span>
      <span className="fr-inline-block">
        <span data-title="title" className="fr-font-medium fr-text-lg fr-block">
          {buttonProps.find}
        </span>
        <span className="fr-text-sm fr-text-black fr-font-medium">
          {buttonProps.name}
        </span>
      </span>
    </>
  );
};