<script lang="ts">
  import { onMount, tick } from 'svelte'
  import { shorten } from '$lib/utils'
  import type { Editor } from 'codemirror'
  import { shareUrl, selectedLang } from '../store'
  import ComboBox from './ComboBox.svelte'

  type Language = {
    text: string
    value: string
    data: { mime: string; mode: string }
  }

  export let editor: Editor
  export let updateShareUrl: () => Promise<void>

  let languages: Language[] = []
  let selectedLanguage: Language | null = null

  let urlInput: HTMLInputElement
  let isUrlInputVisible = false

  $: setDefaultLanguage(languages)
  $: {
    const language = selectedLanguage?.data ?? { mime: null, mode: null }
    // @ts-ignore
    editor.setOption('mode', language.mime)
    CodeMirror.autoLoadMode(editor, language.mode)
    $selectedLang = selectedLanguage?.value ?? null
  }

  onMount(() => {
    languages = CodeMirror.modeInfo.map((e: any) => ({
      text: e.name,
      value: shorten(e.name),
      data: { mime: e.mime, mode: e.mode },
    }))
  })

  export function setLanguage(lang: string) {
    const language = languages.find((e) => e.value === lang)!
    selectedLanguage = language
  }

  function setDefaultLanguage(languages: Language[]) {
    setLanguage('plt')
  }

  async function showUrlInput() {
    // Make sure the url is up to date
    await updateShareUrl()
    isUrlInputVisible = true
    await tick()
    urlInput.select()
  }

  async function copyUrl() {
    urlInput.select()
    await navigator.clipboard.writeText(urlInput.value)
    closeUrlInput()
  }

  function closeUrlInput() {
    isUrlInputVisible = false
  }
</script>

<div class="flex justify-between items-center px-3 py-1 text-sm relative z-10 shadow-md">
  <div class="flex items-center gap-10">
    <h1 class="text-xl">Paste</h1>
    <a
      class="text-xs"
      href="https://paste.scambier.xyz/?l=mrwn#GyoEIKwOeNPUFZF7U7HXITb4obStAtjoKQMj3+vxE5RxArxajeDypW31lbRvcFinvYg2ZOj/9oh1mJs4PPvn1HBFC0S9+6NjD0t8UrglyStxFWq6ZN89THwpUCilXIRxnVH4DXWQE1VNmFboMcqf2Mpg/jVt30y98lMGLyqVIObk8YAbJHCH4RYOQSMpTODPVckXpQD23jw9fK5PiZp5Kdm2SU3TA9zbZMdkj8GiWn5T0l7+0LWlb03f4wVl96yxi5ux/Hj7uMc1CmNWncG+LMFiYaa8Ur+U+pvCUJ8lCpr/fu0++7HeTIWhoftlV4FFEB18VVJditVtzCdJt6DUbIpIj4f7OZzLBMoaidM6aXyD+9uXvPEdlr9X1eSiOh9GQQhumtO/6j5N18CgcKYsYWUoNw0WiI4WcfioSEoAC40gfvyaHsHrLIZ2RgYygBAXJsNbVceKFX1D34pGAKtaaXrJptut0de3ZgfhDrJlUAbUkzaXuT77dQyIq2oy2RAlj29J4Ezq111vK01Ku64GX+FtWuvlYR4eS/nbXneQVwoWZvLNu6bwyDGSkt4FzW+iDMB7U1pbb0pFyM0XtkLh5UWvMquau/LB5GvpuLR25OxpVkeiCa++8svxUzzIgHiOJgA="
      target="_blank"
    >
      About</a
    >
  </div>

  <div class="flex justify-end gap-2">
    <div>
      <ComboBox
        items={languages}
        bind:value={selectedLanguage}
        class="bg-gray-700 border border-gray-300 p-1"
      />
    </div>
    <div>
      <button on:click={showUrlInput}> Generate Link </button>
    </div>
  </div>

  {#if isUrlInputVisible}
    <div class="absolute w-full h-full bg-gray-700 top-0 left-0 p-2">
      <div class="flex gap-2">
        <input
          bind:this={urlInput}
          type="text"
          class="border border-gray-300 bg-transparent p-1 grow"
          value={$shareUrl}
        />
        <button on:click={copyUrl}> Copy </button>
        <button on:click={closeUrlInput}> Close </button>
      </div>
    </div>
  {/if}
</div>

<style lang="scss">
  button {
    @apply text-sm border border-gray-300 p-1 hover:bg-gray-600/50;
  }
</style>
