import { Fragment } from "react/jsx-runtime";
import type { RecipeIngredient, RecipeIngredientSection } from "../../types/recipe";
import { useState } from "react";

interface IngredientListProps {
  sections: RecipeIngredientSection[];
  ingredients: RecipeIngredient[];
}

const CLASSES_ACTIVE = "p-1 bg-blue-100 border border-blue-200 h-fit duration-300 cursor-pointer";
const CLASSES_INACTIVE = "p-1 bg-gray-100 border border-gray-200 h-fit duration-300 cursor-pointer hover:bg-gray-200 hover:border-gray-300";

export default function IngredientList({ sections, ingredients }: IngredientListProps) {
  const [scale, setScale] = useState<number>(1);

  return (
    <>
      <div className="px-4 py-8 md:px-8">
        <div className="flex justify-between items-center">
          <h2 className="text-2xl text-gray-800 font-semibold mb-2">Ingredients</h2>
          {/* Serving size toggle */}
          <div className="flex gap-x-1">
            <button className={scale === 0.5 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(0.5)}> .5x </button>
            <button className={scale === 1 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(1)}> 1x </button>
            <button className={scale === 2 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(2)}> 2x </button>
            <button className={scale === 3 ? CLASSES_ACTIVE : CLASSES_INACTIVE} onClick={() => setScale(3)}> 3x </button>
          </div>
        </div>
        <hr className="text-gray-300" />
        {sections?.map(section => (
          <Fragment key={section.Id}>
            {/* NOTE: If there is a only one section, do not display a name. */}
            {sections.length > 1 && (
              <h3 className="text-xl text-gray-800 font-semibold my-4">{section.Name}</h3>
            )}
            <ul className="text-lg my-2 text-gray-700">
              {ingredients?.filter(x => x.SectionId === section.Id).map(ingredient => (
                <li key={ingredient.Id} className="p-2 hover:bg-gray-100 transition-all duration-300 rounded-sm flex items-center justify-start odd:bg-[#f8f8f8]">
                  <span className="mr-4">
                    <svg className="h-4 text-gray-400" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path
                        d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      ></path>
                    </svg>
                  </span>
                  <span className="font-semibold mr-2">
                    {ingredient.Amount > 0 ? (ingredient.Amount * scale) : null} {ingredient.Unit}
                  </span>
                  {ingredient.Name}
                </li>
              ))}
            </ul>
          </Fragment>
        ))}
      </div>
    </>
  );
}
