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";

const GlobalProperties: React.FC = () => {
  const [limitDistance, setLimitDistance] = useState(false);
  const [distance, setDistance] = useState<number>(5);

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

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

  function updateDistance(value: number) {
    setDistance(value);
  }

  function updateGridDistance(value: number) {
    setGridDistance(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 inputKey="1" label="Roof Visibility" />
      <InputToggle inputKey="2" label="Wall Visibility" />
      <InputToggle inputKey="3" label="Shadows Visibility" />
      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>

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

      <InputToggle
        inputKey="4"
        label="Limit Render Distance"
        value={limitDistance}
        onClick={() => {
          setLimitDistance(!limitDistance);
        }}
      />
      <InputRange
        label="Distance"
        disabled={!limitDistance}
        value={distance}
        key={"5"}
        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;