<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

    const removeEmptyValues = (data: Record<string, any>) => {
      const formattedData = { ...data };
      Object.entries(formattedData).forEach(([key, value]) => {
        if (typeof value === "object") {
          const new_value = removeEmptyValues(value);
          formattedData[key] = new_value
        } else {
          if (typeof value === "boolean") {
            formattedData[key] = value ? "True" : "False";
          }
        }
      });
      return formattedData;
    };

    const formattedBody = removeEmptyValues(b ?? {});
    return `import requests
response = requests.post(
  "${fullpath}",
  json=${JSON.stringify(formattedBody)},
  headers=${JSON.stringify(headers)}
)`;
  };

  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-blue-500">
    <Icon icon="logos:python" class="text-xl" />
    <p class="text-xs font-semibold">Python</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>