import { IconButton, Typography } from "@material-tailwind/react";
import { Dialog, DialogBody, DialogHeader } from "@material-tailwind/react";
import { IoIosCloseCircleOutline } from "react-icons/io";

import { AddressFormComponentProps } from "../components/AddressFormComponent";
import AddressShippingFormComponent from "./AddressShippingFormComponent";

export function ShippingAddressFormDialogComponent({
  open,
  handleOpen,
  formId,
  isLoading,
  proceedSubmit,
}: {
  open: boolean;
  handleOpen: any;
} & AddressFormComponentProps) {
  return (
    <>
      <Dialog
        open={open}
        handler={handleOpen}
        className="lg:min-w-[600px] md:min-w[400px]"
        style={{ maxWidth: "600px", zIndex: 1000 }}
      >
        <DialogHeader className="p-3 md:pb-0 flex items-center justify-between">
          <Typography
            variant="h5"
            className="text-base font-semibold text-black-500"
          >
            Add New Shipping address
          </Typography>
          <IconButton size="sm" variant="text" onClick={handleOpen}>
            <IoIosCloseCircleOutline className="w-6 h-6 text-black-500 cursor-pointer" />
          </IconButton>
        </DialogHeader>
        <DialogBody className="p-3 md:p-4 pb-4 max-h-[80vh] overflow-y-auto overflow-x-hidden">
          <AddressShippingFormComponent
            formId={formId}
            isLoading={isLoading}
            proceedSubmit={proceedSubmit}
            onCancel={() => handleOpen(false)}
          />
        </DialogBody>
        {/* <DialogFooter>
                    <></>
                </DialogFooter> */}
      </Dialog>
    </>
  );
}
