import { useEffect, useState } from "react";
import useStore from "../../../store/store";
import UnitList from "../../UnitList";
import LayoutSlider from "../../mobile/Appartment/LayoutSlider";
import { LayoutToggle } from "../../LayoutToggle";
import CrossButton from "../../CrossButton";

const LayoutModal = () => {
  const [currentView, setCurrentView] = useState(1);
  const [startIndex, setStartIndex] = useState(0);
  const { currentVilla, setModalAnimation } = useStore();
  const [currentUnits, setCurrentUnits] = useState(
    currentVilla?.groundFloorUnits
  );

  useEffect(() => {
    if (currentVilla) {
      switch (currentView) {
        case 3:
          setCurrentUnits(currentVilla.parkingUnits);
          setStartIndex(currentVilla.groundFloorUnits.length);
          break;
        case 2:
          setCurrentUnits(currentVilla.firstFloorUnits);
          setStartIndex(0);
          break;
        default:
          setCurrentUnits(currentVilla.groundFloorUnits);
          setStartIndex(0);
          break;
      }
    }
  }, [currentView, currentVilla]);

  const handleOnCloseClick = () => {
    setModalAnimation(1);
  };

  return (
    <>
      <div className="flex overflow-x-hidden w-screen bg-white h-screen justify-center">
        <div className="flex">
          {currentUnits && (
            <UnitList units={currentUnits} startIndex={startIndex} />
          )}
          <div className="w-full flex flex-col p-8 h-screen">
            <LayoutSlider
              currentView={currentView}
              setCurrentView={setCurrentView}
            />
            <LayoutToggle
              className="max-w-[340px] mx-auto"
              currentView={currentView}
              setCurrentView={setCurrentView}
            />
          </div>
        </div>
      </div>
      <div className="flex justify-between pt-8 pr-8 absolute z-20 left-0 top-0 w-full">
        <div />
        <CrossButton onClick={handleOnCloseClick} />
      </div>
    </>
  );
};

export default LayoutModal;