import { useSwipeable } from "react-swipeable";
import useModal from "../../../store/useModal";
import CrossIcon from "../../icons/CrossIcon";
import { useContext } from "react";
import { MobileModalWrapperContext } from "./MobileModalWrapper";
import MasterInput from "../../MasterInput";
import MasterSelector from "../../MasterSelector";
import Button3 from "../../Button3";

const SendEnquiryMobileModal = () => {
  const { setModal } = useModal();
  const { setIsAnimate } = useContext(MobileModalWrapperContext);

  const handleOnCrossClick = () => {
    if (setIsAnimate) {
      setIsAnimate(false);
      const timeout = setTimeout(() => {
        setModal(null);
        clearTimeout(timeout);
      }, 300);
    }
  };

  const handlers = useSwipeable({
    onSwipedDown: () => handleOnCrossClick(),
  });

  return (
    <div
      className="bg-[#F3F3F2] rounded-ss-2xl rounded-se-2xl h-full p-6 flex flex-col"
      {...handlers}
    >
      <div className="flex justify-between pb-6 border-b">
        <h2 className="text-[#0D1922] text-subheadline-m font-semibold">
          Apartment purchase enquiry
        </h2>
        <Button3
          variant="secondary"
          icon={<CrossIcon />}
          className="text-[#0D1922B2]"
          roundedFull
          onClick={handleOnCrossClick}
        />
      </div>
      <div className="py-6">
        <div className="grid grid-cols-8 p-6 bg-white rounded-2xl">
          <div className="col-span-4 aspect-square">
            <img src="/images/layout-1.png" alt="" className="w-full" />
          </div>
          <div className="flex flex-col justify-between col-span-4">
            <h2 className="text-[#0D1922] text-subheadline-s font-semibold">
              Studio Flex, 607.08 Sqft
            </h2>
            <p className="text-s text-[#00BED7] pt-2">Rove Home Marasi Drive</p>
            <div className="text-[#0D1922B2] text-caption-m font-semibold flex gap-2 items-center pt-1 border-b pb-4">
              <p>East Wing</p>
              <div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
              <p>Floor 11</p>
              <div className="w-1 h-1 rounded-full bg-[#E2E2DC]"></div>
              <p>E-503</p>
            </div>
            <div className="flex flex-col gap-3 pt-4">
              <div className="flex justify-between">
                <p className="text-[#0D192266] text-m">Total Area</p>
                <p className="text-m text-[#0D1922] text-right">607.08 Sqft</p>
              </div>
              <div className="flex justify-between">
                <p className="text-[#0D192266] text-m">Suite Area</p>
                <p className="text-m text-[#0D1922] text-right">485.67 Sqft</p>
              </div>
              <div className="flex justify-between">
                <p className="text-[#0D192266] text-m">Balcony Area</p>
                <p className="text-m text-[#0D1922] text-right">121.42 Sqft</p>
              </div>
              <div className="flex justify-between">
                <p className="text-[#0D192266] text-m">Status</p>
                <p className="text-m text-[#0D1922] text-right">Available</p>
              </div>
              <div className="flex justify-between">
                <p className="text-[#0D192266] text-m">Parking Space</p>
                <p className="text-m text-[#0D1922] text-right">1</p>
              </div>
            </div>
            <p className="text-[#00BED7] font-semibold text-subheadline-s pt-6">
              {/* Unavailable */}
            </p>
          </div>
        </div>
      </div>
      <div className="grid grid-cols-8 pb-4 gap-x-4">
        <h2 className="col-span-4 font-semibold text-subheadline-s">
          Specify the client data to send the request
        </h2>
        <div className="col-span-4 col-start-1 pt-6">
          <MasterInput title="Name" isRequired={true} placeholder="Name" />
        </div>
        <div className="col-span-4 pt-6">
          <MasterInput
            title="Email"
            isRequired={false}
            placeholder="sample@mail.com"
          />
        </div>
        <div className="col-span-4 pt-4">
          <MasterSelector title="Contact number" />
        </div>
      </div>
      <div>
        <div className="flex w-full gap-4 pt-4 border-t">
          <Button3
            className="justify-center w-full"
            onClick={handleOnCrossClick}
          >
            Cancel
          </Button3>
          <Button3 className="justify-center w-full">Send</Button3>
        </div>
        <p className="text-caption-m font-semibold text-[#0D192266] text-center pt-4">
          By clicking on the “Send” button, you accept the privacy policy and
          consent to the processing of personal data.
        </p>
      </div>
    </div>
  );
};

export default SendEnquiryMobileModal;