import { Signal } from "@preact/signals";
import type { Ingredient, IngredientGroup } from "@lib/recipeSchema.ts";
import { FunctionalComponent } from "preact";

function numberToString(num: number) {
  return (Math.floor(num * 4) / 4).toString();
}

function stringToNumber(str: string) {
  return parseFloat(str);
}

const Ingredient = (
  { ingredient, amount, key = "", portion = 1 }: {
    ingredient: Ingredient;
    amount: Signal<number>;
    key?: string | number;
    portion?: number;
  },
) => {
  const { name, quantity, unit } = ingredient;

  const parsedQuantity = stringToNumber(quantity);

  const finalAmount = (typeof parsedQuantity === "number" && amount)
    ? (parsedQuantity / portion) * (amount?.value || 1)
    : "";

  return (
    <tr key={key}>
      <td class="pr-4 py-2">
        {numberToString(finalAmount || 0) +
          (typeof unit === "string" ? unit : "")}
      </td>
      <td class="px-4 py-2">{name}</td>
    </tr>
  );
};

export const IngredientsList: FunctionalComponent<
  {
    ingredients: (Ingredient | IngredientGroup)[];
    amount: Signal<number>;
    portion?: number;
  }
> = (
  { ingredients, amount, portion },
) => {
  return (
    <table class="w-full border-collapse table-auto">
      <tbody>
        {ingredients.map((item, index) => {
          if ("items" in item) {
            // Render IngredientGroup
            const { name, items: groupIngredients } = item as IngredientGroup;

            return (
              <>
                <tr key={index}>
                  <td colSpan={3} class="pr-4 py-2 font-italic">{name}</td>
                </tr>
                {groupIngredients.map((item, index) => {
                  // Render Ingredient
                  return (
                    <Ingredient
                      key={index}
                      ingredient={item}
                      amount={amount}
                      portion={portion}
                    />
                  );
                })}
              </>
            );
          } else {
            return (
              <Ingredient ingredient={item} amount={amount} portion={portion} />
            );
          }
        })}
      </tbody>
    </table>
  );
};