export default function save_quizz_form(): Promise<string> {
    return new Promise((resolve, reject) => {
        const modal = Modal("Save Quizz", () => { reject("Aborted.") }, () => {
            let name = "";
            return (
                <form class="flex items-center gap-2" onsubmit={(e) => {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    resolve(name);
                    modal.close()
                }}>
                    <input type="text" onchange={(e) => name = e.target.value} placeholder="Template name" class=" px-2 outline-none border rounded-md" />
                    <button type="submit"><AiOutlineSave size="1.5em" color="black" /></button>
                </form>
            )
        })
    });
}

export default function save_quizz_form(): Promise<string> {
    return new Promise((resolve, reject) => {
        const modal = Modal("Save Quizz", () => { reject("Aborted.") }, () => {
            let name = "";
            return (
                <form class="flex items-center gap-2" onsubmit={(e) => {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    resolve(name);
                    modal.close()
                }}>
                    <input type="text" onchange={(e) => name = e.target.value} placeholder="Template name" class=" px-2 outline-none border rounded-md" />
                    <button type="submit"><AiOutlineSave size="1.5em" color="black" /></button>
                </form>
            )
        })
    });
}

export default function Modal(title: string, on_close: () => void, children: () => JSXElement) {
    let close = () => { };
    const pop = popup((
    ) => {
        let bg: HTMLDivElement;
        let modal: HTMLDivElement;
        const animate_opt: KeyframeAnimationOptions = {
            duration: 200,
            fill: "forwards"
        };
        close = () => {
            if (!bg || !modal) {
                pop.close();
                on_close();
                return;
            }

            modal.animate([{ top: "50%", transform: "translate(-50%,-50%)" }, { top: "100vh", transform: "translate(-50%, 0)" }], { ...animate_opt, easing: "ease-in" })
            on_close();
            bg.animate([{ opacity: 1 }, { opacity: 0 }], { ...animate_opt, easing: "ease-in" }).finished.then(() => {
                pop.close();
            })
        }

        createEffect(() => {
            if (!bg || !modal) {
                return;
            }
            bg.animate([{ opacity: 0 }, { opacity: 1 }], { ...animate_opt, easing: "ease-out" });
            modal.animate([{ top: "100vh", transform: "translate(-50%, 0)" }, { top: "50%", transform: "translate(-50%,-50%)" }], { ...animate_opt, easing: "ease-out" })
        })

        return (
            <div class="absolute z-50 inset-0 overflow-hidden">
                <div ref={bg} class="inset-0 absolute  bg-[rgba(0,0,0,.3)]" onclick={
                    close
                }>

                </div>

                <div ref={modal} class="border absolute left-1/2 rounded-md bg-white  p-3 ">
                    <div class="flex justify-between items-center gap-4">
                        <span>{title}</span> <AiOutlineClose onclick={close} size="1.25em" class="cursor-pointer" />

                    </div>
                    <div class="mt-2">{children()}</div>
                </div>
            </div>
        )
    })
    return { close };
}

export default function Modal(title: string, on_close: () => void, children: () => JSXElement) {
    let close = () => { };
    const pop = popup((
    ) => {
        let bg: HTMLDivElement;
        let modal: HTMLDivElement;
        const animate_opt: KeyframeAnimationOptions = {
            duration: 200,
            fill: "forwards"
        };
        close = () => {
            if (!bg || !modal) {
                pop.close();
                on_close();
                return;
            }

            modal.animate([{ top: "50%", transform: "translate(-50%,-50%)" }, { top: "100vh", transform: "translate(-50%, 0)" }], { ...animate_opt, easing: "ease-in" })
            on_close();
            bg.animate([{ opacity: 1 }, { opacity: 0 }], { ...animate_opt, easing: "ease-in" }).finished.then(() => {
                pop.close();
            })
        }

        createEffect(() => {
            if (!bg || !modal) {
                return;
            }
            bg.animate([{ opacity: 0 }, { opacity: 1 }], { ...animate_opt, easing: "ease-out" });
            modal.animate([{ top: "100vh", transform: "translate(-50%, 0)" }, { top: "50%", transform: "translate(-50%,-50%)" }], { ...animate_opt, easing: "ease-out" })
        })

        return (
            <div class="absolute z-50 inset-0 overflow-hidden">
                <div ref={bg} class="inset-0 absolute  bg-[rgba(0,0,0,.3)]" onclick={
                    close
                }>

                </div>

                <div ref={modal} class="border absolute left-1/2 rounded-md bg-white  p-3 ">
                    <div class="flex justify-between items-center gap-4">
                        <span>{title}</span> <AiOutlineClose onclick={close} size="1.25em" class="cursor-pointer" />

                    </div>
                    <div class="mt-2">{children()}</div>
                </div>
            </div>
        )
    })
    return { close };
}

export async function gqlCall(query: string) {
  const queryFinale = JSON.stringify({ query });

  const response = await fetch("http://localhost:3000/graphql", {
    method: "POST",
    body: queryFinale,
  });

  if (!response.ok) return;
  const gqlResponse = await response.json();
  if (gqlResponse.errors) return;
  return gqlResponse.data;
}

export async function gqlCall(query: string) {
  const queryFinale = JSON.stringify({ query });

  const response = await fetch("http://localhost:3000/graphql", {
    method: "POST",
    body: queryFinale,
  });

  if (!response.ok) return;
  const gqlResponse = await response.json();
  if (gqlResponse.errors) return;
  return gqlResponse.data;
}

export async function fetchServiceInfoDetailed(
  service_name: string
): Promise<IActionServiceInfoDetailed> {
  const result = await gqlCall(
    `....`
  );

  if (result?.service) return result?.service;

  throw new Error("Failed to fetch service information.");
}

export async function fetchServiceInfoDetailed(
  service_name: string
): Promise<IActionServiceInfoDetailed> {
  const result = await gqlCall(
    `....`
  );

  if (result?.service) return result?.service;

  throw new Error("Failed to fetch service information.");
}

import { For, createEffect } from "solid-js";
import { createRouteData, useParams, useRouteData } from "solid-start";

import { fetchServiceInfoDetailed } from "~/lib/actions/service";

export function routeData() {
  const params = useParams<{ id: string }>();

  return createRouteData(() => fetchServiceInfoDetailed(decodeURI(params.id)));
}

export default function ServiceDetail() {
  const serviceInfo = useRouteData<typeof routeData>();
  createEffect(() => {
    console.log(serviceInfo());
  });
  return (
    <>
      <div>
        {serviceInfo()
          ?.description.split("\n")
          .map((str) => (
            <>
              <p>{str}</p>
              <br />
            </>
          ))}
        <ul class="mt-10 list-disc list-inside">
          <For each={serviceInfo()?.benefit}>
            {(featureish) => (
              <li class="mt-2">
                <span>{featureish}</span>
              </li>
            )}
          </For>
        </ul>
      </div>
    </>
  );
}

import { For, createEffect } from "solid-js";
import { createRouteData, useParams, useRouteData } from "solid-start";

import { fetchServiceInfoDetailed } from "~/lib/actions/service";

export function routeData() {
  const params = useParams<{ id: string }>();

  return createRouteData(() => fetchServiceInfoDetailed(decodeURI(params.id)));
}

export default function ServiceDetail() {
  const serviceInfo = useRouteData<typeof routeData>();
  createEffect(() => {
    console.log(serviceInfo());
  });
  return (
    <>
      <div>
        {serviceInfo()
          ?.description.split("\n")
          .map((str) => (
            <>
              <p>{str}</p>
              <br />
            </>
          ))}
        <ul class="mt-10 list-disc list-inside">
          <For each={serviceInfo()?.benefit}>
            {(featureish) => (
              <li class="mt-2">
                <span>{featureish}</span>
              </li>
            )}
          </For>
        </ul>
      </div>
    </>
  );
}