"use client"
import * as React from "react";
import Dialog from "@mui/material/Dialog";
import useFormModal from "../store/useFormModal";
import Form from "../contact-us/Form";
import { Button, IconButton } from "@mui/material";
import CloseIcon from '@mui/icons-material/Close';
import Image from "next/image";
import ForgetPassword from "./ForgetPassword";
import FormThreePSelling from "./FormThreePSelling";

export default function FormModal() {
  const { isOpen, modalType, closeModal } = useFormModal();

  return (
    <Dialog
      open={isOpen}
      onClose={closeModal}
      aria-labelledby="form-dialog-title"
      fullWidth
      maxWidth="sm"
      PaperProps={{
        sx: {
          width: "calc(100% - 15px)",
          margin: "11px",
        },
      }}
    >
      {/* <DialogTitle id="form-dialog-title">
        {modalType === "3pSelling" && "3P Selling Form"}
        {modalType === "contactForm" && "Contact Us"}
      </DialogTitle> */}

      <div className="px-4 pb-6 lg:p-6">
        {modalType === "3pSelling" && (
          <div className="relative">
            <div className="flex justify-end lg:hidden">
                <IconButton onClick={closeModal} aria-label="close" sx={{px:0}}>
                    <CloseIcon />
                </IconButton>
            </div>
             <FormThreePSelling />
          </div>
        )}

        {modalType === "contactForm" && (
          <div className="relative">
            <div className="flex justify-end lg:hidden">
                <IconButton onClick={closeModal} aria-label="close" sx={{px:0}}>
                    <CloseIcon />
                </IconButton>
            </div>
             <Form />
          </div>
        )}

        {
          modalType === "thankyou" && (
            <div className="flex flex-col items-center justify-center text-center">
              <Image src='/assets/icons/mailSent2.gif' alt="" width={300} height={300} />
              <div className="mb-3">
                <h3 className="text-[22px] lg:text-[35px] font-bold font-kanit leading-tight">Thanks for getting in touch!</h3>
                <p className="text-[13px] lg:text-[15pxu] font-light">Your message is on it's way to our team. We’ll get in touch with you soon.</p>
              </div>
              <Button onClick={closeModal}>Continue</Button>
            </div>
          )
        }

        {
          modalType === "forgotPassword" && (
            <div>
              <ForgetPassword />
            </div>
          )
        }
      </div>

     {/*  <DialogActions>
        <Button onClick={closeModal}>Close</Button>
      </DialogActions> */}
    </Dialog>
  );
}