import React, { useState } from "react";
import InputRange from "../../../ui/inputs/InputRange";
import InputToggle from "../../../ui/inputs/InputToggle";
import { AI_Icon } from "../../../icons/ExportCommonIcons";
import LabeledButton from "../../../ui/inputs/LabledButton";
import {
  useAzimuth,
  useElevation,
  useRenderDistance,
  useResetCamera,
  useRoofVisibility,
  useSelectedWallItem,
  useShadows,
  useSocketStore,
  useToggleView,
  useWallVisibility,
} from "../../../../store/store";
import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
import * as CONSTANTS from "../../../../types/world/worldConstants";
const GlobalProperties: React.FC = () => {
  const { toggleView, setToggleView } = useToggleView();
  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
  const { roofVisibility, setRoofVisibility } = useRoofVisibility();
  const { wallVisibility, setWallVisibility } = useWallVisibility();
  const { shadows, setShadows } = useShadows();
  const { resetCamera, setResetCamera } = useResetCamera();
  const { elevation, setElevation } = useElevation();
  const { azimuth, setAzimuth } = useAzimuth();
  const { renderDistance, setRenderDistance } = useRenderDistance();
  const { socket } = useSocketStore();
  const [limitDistance, setLimitDistance] = useState(false);
  const [distance, setDistance] = useState<number>(30);

  const [limitGridDistance, setLimitGridDistance] = useState(false);
  const [gridDistance, setGridDistance] = useState<number>(5);

  function optimizeScene() {
    setLimitDistance(true);
    setDistance(30);
  }

  function updateDistance(value: number) {
    console.log("value: ", value);
    setDistance(value);
    setRenderDistance(value);
  }

  function updateGridDistance(value: number) {
    setGridDistance(value);
  }
  // Function to toggle roof visibility
  const changeRoofVisibility = async () => {
    const email = localStorage.getItem("email");
    const organization = email!.split("@")[1].split(".")[0];

    //using REST
    const data = await setEnvironment(
      organization,
      localStorage.getItem("userId")!,
      wallVisibility,
      !roofVisibility,
      shadows
    );
    // console.log('data: ', data);

    //using Socket
    // const visData = {
    //   organization: organization,
    //   userId: localStorage.getItem('userId')!,
    //   wallVisibility: wallVisibility,
    //   roofVisibility: !roofVisibility,
    //   shadowVisibility: shadows,
    //   socketId: socket.id
    // };
    // socket.emit('v1:Environment:set', visData)

    setRoofVisibility(!roofVisibility); // Toggle roof visibility
  };
  // Function to toggle wall visibility
  const changeWallVisibility = async () => {
    const email = localStorage.getItem("email");
    const organization = email!.split("@")[1].split(".")[0];
    //using REST
    const data = await setEnvironment(
      organization,
      localStorage.getItem("userId")!,
      !wallVisibility,
      roofVisibility,
      shadows
    );
    // console.log('data: ', data);

    //using Socket
    // const visData = {
    //   organization: organization,
    //   userId: localStorage.getItem('userId')!,
    //   wallVisibility: !wallVisibility,
    //   roofVisibility: roofVisibility,
    //   shadowVisibility: shadows,
    //   socketId: socket.id
    // };
    // socket.emit('v1:Environment:set', visData)

    setWallVisibility(!wallVisibility); // Toggle wall visibility
  };

  const shadowVisibility = async () => {
    const email = localStorage.getItem("email");
    const organization = email!.split("@")[1].split(".")[0];
    //using REST
    const data = await setEnvironment(
      organization,
      localStorage.getItem("userId")!,
      wallVisibility,
      roofVisibility,
      !shadows
    );
    // console.log('data: ', data);

    //using Socket
    // const visData = {
    //   organization: organization,
    //   userId: localStorage.getItem('userId')!,
    //   wallVisibility: wallVisibility,
    //   roofVisibility: roofVisibility,
    //   shadowVisibility: !shadows,
    //   socketId: socket.id
    // };
    // socket.emit('v1:Environment:set', visData)

    setShadows(!shadows);
  };
  const toggleResetCamera = () => {
    if (!toggleView) {
      setResetCamera(true); // Trigger reset camera action
    }
  };

  // function changeRenderDistance(e: any) {
  //   if (parseInt(e.target.value) < 20) {
  //     setRenderDistance(20);
  //   } else if (parseInt(e.target.value) > 75) {
  //     setRenderDistance(75);
  //   } else {
  //     setRenderDistance(parseInt(e.target.value));
  //   }
  // }
  return (
    <div className="global-properties-container">
      <div className="header">Environment</div>
      <div className="optimize-button" onClick={optimizeScene}>
        <AI_Icon />
        Optimize
      </div>

      <div className="split"></div>

      <InputToggle
        value={roofVisibility}
        inputKey="1"
        label="Roof Visibility"
        onClick={changeRoofVisibility}
      />
      <InputToggle
        value={wallVisibility}
        inputKey="2"
        label="Wall Visibility"
        onClick={changeWallVisibility}
      />
      <InputToggle
        value={shadows}
        inputKey="3"
        label="Shadows Visibility"
        onClick={shadowVisibility}
      />
      <LabeledButton
        label="Reset Camera"
        onClick={toggleResetCamera}
        value="Reset"
      />

      <div className="split"></div>
      {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
      <InputToggle
        inputKey="4"
        label="Limit Render Distance"
        value={limitDistance}
        onClick={() => {
          setLimitDistance(!limitDistance);
        }}
      />
      <InputRange
        label="Distance"
        disabled={!limitDistance}
        value={distance}
        key={"5"}
        min={CONSTANTS.distanceConfig.minDistance}
        max={CONSTANTS.distanceConfig.maxDistance}
        onChange={(value: number) => updateDistance(value)}
      />

      <div className="split"></div>

      <InputToggle
        inputKey="6"
        label="Display Grid"
        value={limitGridDistance}
        onClick={() => {
          setLimitGridDistance(!limitGridDistance);
        }}
      />
      <InputRange
        label="Tile Distance"
        disabled={!limitGridDistance}
        value={gridDistance}
        key={"7"}
        onChange={(value: number) => updateGridDistance(value)}
      />
    </div>
  );
};

export default GlobalProperties;