import { Button, Checkbox } from "antd";
import {
  useHasManualEdits,
  usePointSelection,
} from "../../stores/usePointSelection";
import { TakeToWorkButton } from "./InitialSidebar/TakeToWorkButton";
import { Filters } from "./Filters";
import { useMode } from "../../stores/useMode";
import { MODES } from "../../config";
import { twMerge } from "tailwind-merge";
import { SelectedLocations } from "./InitialSidebar/SelectedLocations";
import { forwardRef } from "react";
import { LAYER_IDS } from "../../Map/Layers/constants";
import { useLayersVisibility } from "../../stores/useLayersVisibility";
import { Title } from "../../components/Title";

export const Sidebar = forwardRef(({ isCollapsed }, ref) => {
  const hasManualEdits = useHasManualEdits();
  const { mode } = useMode();
  const { reset: resetSelection } = usePointSelection();
  const { isVisible, toggleVisibility } = useLayersVisibility();

  return (
    <div
      className={twMerge(
        "h-screen p-3 overflow-y-auto shrink-0 border-solid border-border border-0 border-r-[1px] flex flex-col transition-all pt-20",
        isCollapsed ? "basis-0 px-0 -translate-x-[320px]" : "basis-[320px]"
      )}
      ref={ref}
    >
      <div className="space-y-5 flex flex-col justify-between flex-1">
        <div>
          <Filters disabled={hasManualEdits} />

          {mode === MODES.APPROVE_WORKING && (
            <div className="mt-4">
              <Title text="Статусы" />
              <div className="flex flex-col space-y-2">
                <Checkbox
                  onChange={() => toggleVisibility(LAYER_IDS.approve)}
                  checked={isVisible[LAYER_IDS.approve]}
                >
                  Согласование-установка
                </Checkbox>
                <Checkbox
                  className={"!ml-0"}
                  onChange={() => toggleVisibility(LAYER_IDS.working)}
                  checked={isVisible[LAYER_IDS.working]}
                >
                  Работает
                </Checkbox>
              </div>
            </div>
          )}

          {mode === MODES.INITIAL && hasManualEdits ? (
            <Button block className={"mt-2"} onClick={resetSelection}>
              Отменить ручное редактирование
            </Button>
          ) : null}
        </div>

        <div>
          {mode === MODES.INITIAL && (
            <>
              <SelectedLocations />
              <TakeToWorkButton />
            </>
          )}
        </div>
      </div>
    </div>
  );
});
