import type { ChangeEvent } from "react";
import type { FilterBitKey, SearchFilters } from "../../types/search";
import DropdownButton from "../buttons/DropdownButton";

interface RecipeSearchFilterDropdownProps {
  filters: SearchFilters;
  setFilters: (filters: SearchFilters) => void;
  display: boolean;
};

function isBitActive(bits: number, bit: number): boolean {
  return (bits & bit) === bit;
}

export default function RecipeSearchFilterDropdown({ filters, setFilters, display }: RecipeSearchFilterDropdownProps) {
  const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;

    const key: FilterBitKey = name as FilterBitKey;
    const [current, bit] = [filters[key], Number(value)];

    const new_filters: SearchFilters = {
      ...filters,
      [key]: isBitActive(current, bit) ? current - bit : current + bit,
    };

    setFilters(new_filters);
  }

  return (
    <div className={`${display ? "block" : "hidden"} w-full p-2 border border-gray-300 my-2 rounded-lg`}>
      <div className="w-full border-b border-gray-300 py-2">
        <h3 className="mb-2">
          Meal
        </h3>
        <div className="flex text-xs flex-wrap gap-1 gap-y-3">
          <DropdownButton content="Breakfast" name="MealType" value="1" selected={isBitActive(filters.MealType, 1)} changeHandler={changeHandler} />
          <DropdownButton content="Lunch" name="MealType" value="2" selected={isBitActive(filters.MealType, 2)} changeHandler={changeHandler} />
          <DropdownButton content="Dinner" name="MealType" value="4" selected={isBitActive(filters.MealType, 4)} changeHandler={changeHandler} />
          <DropdownButton content="Desert" name="MealType" value="8" selected={isBitActive(filters.MealType, 8)} changeHandler={changeHandler} />
          <DropdownButton content="Snack" name="MealType" value="16" selected={isBitActive(filters.MealType, 16)} changeHandler={changeHandler} />
          <DropdownButton content="Side" name="MealType" value="32" selected={isBitActive(filters.MealType, 32)} changeHandler={changeHandler} />
          <DropdownButton content="Other" name="MealType" value="64" selected={isBitActive(filters.MealType, 64)} changeHandler={changeHandler} />
        </div>
      </div>
      <div className="w-full border-b border-gray-300 py-2">
        <h3 className="mb-2">
          Cook Time
        </h3>
        <div className="flex text-xs flex-wrap gap-1 gap-y-3">
          <DropdownButton content="< 15 min" name="Time" value="1" selected={isBitActive(filters.Time, 1)} changeHandler={changeHandler} />
          <DropdownButton content="15 to 30 min" name="Time" value="2" selected={isBitActive(filters.Time, 2)} changeHandler={changeHandler} />
          <DropdownButton content="30 to 60 min" name="Time" value="4" selected={isBitActive(filters.Time, 4)} changeHandler={changeHandler} />
          <DropdownButton content="60 to 120 min" name="Time" value="8" selected={isBitActive(filters.Time, 8)} changeHandler={changeHandler} />
          <DropdownButton content="+120 min" name="Time" value="16" selected={isBitActive(filters.Time, 16)} changeHandler={changeHandler} />
        </div>
      </div>
      <div className="w-full border-b border-gray-300 py-2">
        <h3 className="mb-2">
          Difficulty
        </h3>
        <div className="flex text-xs flex-wrap gap-1 gap-y-3">
          <DropdownButton content="Beginner" name="Difficulty" value="1" selected={isBitActive(filters.Difficulty, 1)} changeHandler={changeHandler} />
          <DropdownButton content="Easy" name="Difficulty" value="2" selected={isBitActive(filters.Difficulty, 2)} changeHandler={changeHandler} />
          <DropdownButton content="Intermediate" name="Difficulty" value="4" selected={isBitActive(filters.Difficulty, 4)} changeHandler={changeHandler} />
          <DropdownButton content="Challenging" name="Difficulty" value="8" selected={isBitActive(filters.Difficulty, 8)} changeHandler={changeHandler} />
          <DropdownButton content="Extreme" name="Difficulty" value="16" selected={isBitActive(filters.Difficulty, 16)} changeHandler={changeHandler} />
        </div>
      </div>
      <div className="w-full border-b border-gray-300 py-2">
        <h3 className="mb-2">
          Serving Size
        </h3>
        <div className="flex text-xs flex-wrap gap-1 gap-y-3">
          <DropdownButton content="1 to 2" name="ServingSize" value="1" selected={isBitActive(filters.ServingSize, 1)} changeHandler={changeHandler} />
          <DropdownButton content="2 to 4" name="ServingSize" value="2" selected={isBitActive(filters.ServingSize, 2)} changeHandler={changeHandler} />
          <DropdownButton content="4 to 6" name="ServingSize" value="4" selected={isBitActive(filters.ServingSize, 4)} changeHandler={changeHandler} />
          <DropdownButton content="6 to 8" name="ServingSize" value="8" selected={isBitActive(filters.ServingSize, 8)} changeHandler={changeHandler} />
          <DropdownButton content="8+" name="ServingSize" value="16" selected={isBitActive(filters.ServingSize, 16)} changeHandler={changeHandler} />
        </div>
      </div>
      <div className="w-full pt-2 flex justify-end items-end">
        <button
          type="submit"
          className="w-full text-sm md:text-base text-white rounded-lg py-1.5 md:py-2 bg-blue-600 hover:bg-blue-700 duration-300">
          Apply Filters
        </button>
      </div>
    </div>
  );
}
