import { useMode } from "../stores/useMode";
import { Button, Tooltip } from "antd";
import { AIIcon } from "../icons/AIIcon";
import { MODES } from "../config";
import { ApproveIcon } from "../icons/ApproveIcon";
import { WorkingIcon } from "../icons/WorkingIcon";

export const ModeSelector = () => {
  const { mode, setMode } = useMode();

  const handleClick = (selectedMode) => {
    setMode(selectedMode);
  };

  const getType = (currentMode) => {
    if (currentMode === mode) return "primary";

    return "default";
  };

  return (
    <>
      <Tooltip title="Отбор локаций для работы">
        <Button
          icon={<AIIcon />}
          type={getType(MODES.INITIAL)}
          onClick={() => handleClick(MODES.INITIAL)}
          className="flex items-center justify-center"
          size="large"
        />
      </Tooltip>

      <Tooltip title="Управление статусами локаций">
        <Button
          icon={<ApproveIcon />}
          type={getType(MODES.APPROVE_WORKING)}
          onClick={() => handleClick(MODES.APPROVE_WORKING)}
          className="flex items-center justify-center"
          size="large"
        />
      </Tooltip>

      <Tooltip title="Мониторинг работающих постаматов" className="text-center">
        <Button
          icon={<WorkingIcon />}
          type={getType(MODES.WORKING)}
          onClick={() => handleClick(MODES.WORKING)}
          className="flex items-center justify-center"
          size="large"
        />
      </Tooltip>
    </>
  );
};
