<script lang="ts">
  import Icon from '@iconify/svelte';
  import Highlight from "svelte-highlight";
  import javascript from "svelte-highlight/languages/javascript";
  import { env } from '$env/dynamic/public'

  export let body: Record<string, any>;
  export let endpoint: string;
  export let headers: Record<string, any>;
  export let onCopyToClipboard: (e: string) => void;

  let isCopied: boolean = false;

  const generateCurlRequestFromEndpoint = (body: Record<string, any>) => {
    const b = { ...body };
    const fullpath = `${env.PUBLIC_INFERENCE_API_URL}/models/${endpoint}`;
    delete b.model
    
    return `const response = await fetch(
      "${fullpath}",
      {
        method: "POST",
        headers: ${JSON.stringify(headers)},
        body: ${JSON.stringify(b)}
      }
    )`;
  };

  const handleCopy = () => {
    onCopyToClipboard(generateCurlRequestFromEndpoint(body));
    isCopied = true
    setTimeout(() => {
      isCopied = false
    }, 1000);
  };

  $: code = generateCurlRequestFromEndpoint(body)
</script>

<div class="bg-slate-900/50 rounded-xl overflow-hidden">
  <header class="bg-slate-900 flex items-center justify-start px-5 py-4 uppercase gap-2 text-yellow-500">
    <Icon icon="ri:javascript-fill" class="text-xl" />
    <p class="text-xs font-semibold">Javascript</p>
  </header>
  <main class="px-6 py-6">
    <Highlight language={javascript} {code} />
    <button class="flex justify-end relative w-full" on:click={handleCopy}>
      <Icon icon="solar:copy-bold-duotone" class="text-slate-500 cursor-pointer hover:text-slate-300 transition-all duration-75 w-5 h-5" />
      <div
        class="bg-indigo-500/60 text-slate-100 text-xs font-semibold absolute bottom-0 right-0 z-10 rounded-lg px-2 py-1 pointer-events-none -translate-y-full transition-all duration-200"
        class:opacity-0={!isCopied}
      >
        Copied!
      </div>
    </button>
  </main>
</div>