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

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

  return (
    <div className={"space-y-1 flex flex-col"}>
      {mode === MODES.PENDING && (
        <>
          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.working)}
            checked={isVisible[LAYER_IDS.working]}
          >
            Работающие постаматы
          </Checkbox>
          <Checkbox
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.cancelled)}
            checked={isVisible[LAYER_IDS.cancelled]}
          >
            Отмененные локации
          </Checkbox>
        </>
      )}
      {postGroups?.map((item) => {
        return (
          <Checkbox
            key={item.id}
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.pvz_category + item.id)}
            checked={isVisible[LAYER_IDS.pvz_category + item.id]}
          >
            {item.name}
          </Checkbox>
        );
      })}

      {otherGroups && otherGroups.map((item) => {
        return (
          <Checkbox
            key={item.id}
            className={"!ml-0"}
            onChange={() => toggleVisibility(LAYER_IDS.other_category + item.id)}
            checked={isVisible[LAYER_IDS.other_category + item.id]}
          >
            {item.name}
          </Checkbox>
        );
      })}

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