import { Button } from "antd";
import { twMerge } from "tailwind-merge";
import { Title } from "../../components/Title";
import { useFilters } from "../../stores/useFilters";
import { CATEGORIES } from "../../config";

const SelectItem = ({ name, isActive, onClick, disabled }) => {
  return (
    <Button
      block
      type="text"
      className={twMerge(
        "text-left",
        isActive && "bg-blue hover:bg-blue active:bg-blue focus:bg-blue"
      )}
      onClick={onClick}
      disabled={disabled}
    >
      {name}
    </Button>
  );
};

export const CategoriesSelect = ({ disabled }) => {
  const { filters, setCategories } = useFilters();

  const handleClick = (category) => setCategories(category);

  const clear = () => setCategories([]);

  return (
    <div>
      <div className="flex justify-between items-center mb-1">
        <Title text={"Категория объекта размещения"} />
        {filters.categories.length !== 0 && (
          <Button
            type="text"
            className="text-grey text-xs p-0 hover:bg-transparent active:bg-transparent focus:bg-transparent h-fit"
            onClick={clear}
            disabled={disabled}
          >
            сбросить
          </Button>
        )}
      </div>

      <div className="space-y-2">
        {Object.entries(CATEGORIES).map(([key, value]) => (
          <SelectItem
            key={key}
            name={value}
            isActive={filters.categories.includes(value)}
            onClick={() => handleClick(value)}
            disabled={disabled}
          />
        ))}
      </div>
    </div>
  );
};