<script lang="ts">
  import { get } from "svelte/store";
  import { generationStore } from "$lib/stores/use-generation";

	import Button from "$lib/components/Button.svelte";
  import Loading from "$lib/components/Loading.svelte";

  let generation = get(generationStore);
  export let loading_generation: boolean = false;

  let loading: boolean = false;
  let already_saved: boolean = false;

  const saveImage = () => {
		const link = document.createElement('a');
		link.href = generation?.image as string;
		link.download = `${generation?.form?.inputs?.slice(0, 20)}.png`;
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);
	}

  const share = () => {
    if (loading) return;
    loading = true;
    fetch(`/api/generate/share`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ image: generation?.image, generation: generation?.form })
    }).then(() => {
      loading = false;
      already_saved = true;
    })
  }

  generationStore.subscribe((value) => {
    console.log(value);
    generation = value;
  })

  // create a ms countup depending on the generation time, to show the user how long it took to generate the image
  let ms = 0;
  let interval: any;
  const start = () => {
    interval = setInterval(() => {
      ms += 100;
    }, 100)
  }
  const stop = () => {
    clearInterval(interval);
  }

  $: if (!loading_generation) {
    ms = 0;
    stop();
  } else {
    start();
  }

  const format = (ms: number) => {
    const date = new Date(ms);
    const seconds = date.getSeconds();
    const milliseconds = Math.round(date.getMilliseconds() / 100);
    return `${seconds}.${milliseconds}s`;
  }
    

</script>

<div class=" w-full border-t xl:border-t-0 xl:border-l border-neutral-800 h-full col-span-5 xl:col-span-2" class:!border-black={!generation?.image || loading_generation}>
  {#if loading_generation}
    <div class="w-full h-full flex items-center justify-center flex-col gap-3 bg-neutral-950 relative">
      <p class="text-neutral-100 text-xl font-semibold">
        {format(ms)}
      </p>
      <p class="text-xs italic text-neutral-500">
        Generating image...
      </p>
    </div>
  {:else}
    {#if generation?.image}
      {#if typeof generation?.image === "string"}
        <img src={generation?.image} alt="Generation" class="w-full mx-auto object-contain" />
        <div class="p-8 w-full">
          <div class="w-full flex items-center justify-end gap-4">
            <Button size="lg" theme="light" icon="material-symbols:save" iconPosition="right" onClick={saveImage}>Save</Button>
            <Button
              size="lg"
              theme="blue"
              icon="bxs:share"
              iconPosition="right"
              loading={loading}
              disabled={loading || already_saved}
              onClick={share}
            >
              {#if already_saved}
                Shared!
              {:else}
                Share with community
              {/if}
            </Button>
          </div>
          <p class="text-neutral-500 text-sm text-right mt-2.5">
            All images not shared with the community are deleted right after generation.
            <br>
            Your informations are not shared with anyone.
          </p>
          {#if generation?.form}
            <div class="mt-6 grid grid-cols-1 gap-4">
              <div>
                <p class="text-neutral-400 font-semibold text-xs uppercase">
                  Model selected
                </p>
                <div class="flex items-center justify-start gap-4 px-2 py-2.5 hover:bg-neutral-800/60 transition-all duration-200 rounded-lg cursor-pointer w-full text-left">
                  <img src={generation?.form?.model.image} alt={generation?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
                  <div>
                    <p class="text-neutral-200 text-base font-medium">{generation?.form?.model.title}</p>
                    <p class="text-neutral-400 text-sm">{generation?.form?.model.id}</p>
                  </div>
                </div>
              </div>
              <div>
                <p class="text-neutral-400 font-semibold text-xs uppercase">
                  Prompt
                </p>
                <p class="text-neutral-200 text-base font-medium mt-2">"{generation?.form.inputs}"</p>
              </div>
            </div>
          {/if}
        </div>
      {:else}
        <div>
          Something went wrong
        </div>
      {/if}
    {/if}
  {/if}
</div>