import { Title } from "../../components/Title";
import { Checkbox } from "antd";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { useMode } from "../../stores/useMode";
import { MODES } from "../../config";
import { LAYER_IDS } from "../Layers/constants";

export const LayersVisibility = () => {
  const { toggleVisibility, isVisible } = useLayersVisibility();
  const { mode } = useMode();

  return (
    <div>
      <Title text={"Слои"} className={"mb-1"} />
      <div className={"space-y-1 flex flex-col"}>
        {/*{mode === MODES.INITIAL && (*/}
        {/*  <Checkbox*/}
        {/*    onChange={() => toggleVisibility(LAYER_IDS.initial)}*/}
        {/*    checked={isVisible[LAYER_IDS.initial]}*/}
        {/*  >*/}
        {/*    Локации к рассмотрению*/}
        {/*  </Checkbox>*/}
        {/*)}*/}

        {mode === MODES.WORKING && (
          <>
            <Checkbox
              className={"!ml-0"}
              onChange={() => toggleVisibility(LAYER_IDS.working)}
              checked={isVisible[LAYER_IDS.working]}
            >
              Работает
            </Checkbox>
          </>
        )}
      </div>
    </div>
  );
};
