import { PageProps } from "fresh";
import { IngredientsList } from "@islands/IngredientsList.tsx";
import { MainLayout } from "@components/layouts/main.tsx";
import Counter from "@islands/Counter.tsx";
import { Signal, useSignal } from "@preact/signals";
import { RedirectSearchHandler } from "@islands/Search.tsx";
import { KMenu } from "@islands/KMenu.tsx";
import PageHero from "@components/PageHero.tsx";
import { Star } from "@components/Stars.tsx";
import { renderMarkdown } from "@lib/markdown.ts";
import { isValidRecipe } from "@lib/recipeSchema.ts";
import { MetaTags } from "@components/MetaTags.tsx";
import { fetchResource } from "@lib/marka/index.ts";
import { RecipeResource } from "@lib/marka/schema.ts";
import { parseIngredients } from "@lib/parseIngredient.ts";
import { parseRating } from "@lib/helpers.ts";
import { HttpError } from "fresh";
import { define } from "../../utils.ts";

export const handler = define.handlers({
  async GET(ctx) {
    try {
      const recipe = await fetchResource<RecipeResource>(
        `recipes/${ctx.params.name}.md`,
      );
      if (!recipe) {
        throw new HttpError(404);
      }
      return { data: { recipe, session: ctx.state.session } };
    } catch (_e) {
      throw new HttpError(404);
    }
  },
});

function ValidRecipe({
  recipe,
  amount,
  portion,
}: { recipe: RecipeResource; amount: Signal<number>; portion: number }) {
  const ingredients = parseIngredients(
    recipe.content.recipeIngredient?.join("\n") || "",
  );

  return (
    <>
      <div class="flex items-center gap-8">
        <h3 class="text-3xl my-5">Ingredients</h3>
        {portion && <Counter count={amount} />}
      </div>
      {
        <IngredientsList
          ingredients={ingredients}
          amount={amount}
          portion={portion}
        />
      }
      <h3 class="text-3xl my-5">Preparation</h3>
      <div class="pl-2">
        <ol class="list-decimal grid gap-4">
          {recipe.content.recipeInstructions &&
            (recipe.content.recipeInstructions
              .filter((inst) => !!inst?.length)
              .map((instruction) => {
                return (
                  <li
                    // deno-lint-ignore react-no-danger
                    dangerouslySetInnerHTML={{
                      __html: renderMarkdown(instruction),
                    }}
                  />
                );
              }))}
        </ol>
      </div>
    </>
  );
}

export default define.page(function (
  props: PageProps<{ recipe: RecipeResource; session: Record<string, string> }>,
) {
  const { recipe, session } = props.data;

  const portion = recipe.content.recipeYield;
  const amount = useSignal(portion || 1);

  const subline = [
    recipe?.content?.totalTime && `Duration ${recipe?.content?.totalTime}`,
  ].filter(Boolean) as string[];

  const rating = recipe.content.reviewRating?.ratingValue &&
    parseRating(recipe.content.reviewRating.ratingValue);

  return (
    <MainLayout
      url={props.url}
      title={`Recipes > ${recipe.content?.name}`}
      context={recipe}
    >
      <RedirectSearchHandler />
      <KMenu type="main" context={recipe} />
      <MetaTags resource={recipe} />

      <PageHero
        image={recipe.image?.url}
        thumbhash={recipe.image?.thumbhash}
      >
        <PageHero.Header>
          <PageHero.BackLink href="/recipes" />
          {session && (
            <PageHero.EditLink
              href={`https://notes.max-richter.dev/resources/recipes/${recipe.name}`}
            />
          )}
        </PageHero.Header>
        <PageHero.Footer>
          <PageHero.Title link={recipe.content?.url}>
            {recipe.content.name}
          </PageHero.Title>
          <PageHero.Subline
            entries={subline}
          >
            {rating && <Star rating={rating} />}
          </PageHero.Subline>
        </PageHero.Footer>
      </PageHero>

      <div class="px-8 text-white mt-10">
        {isValidRecipe(recipe)
          ? (
            <ValidRecipe
              recipe={recipe}
              amount={amount}
              portion={portion || 1}
            />
          )
          : (
            <div class="whitespace-break-spaces markdown-body">
              {recipe}
            </div>
          )}
      </div>
    </MainLayout>
  );
});