<template>
  <main>
    <div class="mt-1 columns is-multiline">
      <div class="column is-12 is-clearfix is-unselectable">
        <span class="title is-4">
          <span class="icon-text">
            <template v-if="toggleForm">
              <span class="icon"><i class="fa-solid" :class="{ 'fa-edit': presetRef, 'fa-plus': !presetRef }" /></span>
              <span>{{ presetRef ? `Edit - ${prettyName(preset.name || '')}` : 'Add' }}</span>
            </template>
            <template v-else>
              <span class="icon"><i class="fa-solid fa-sliders" /></span>
              <span>Presets</span>
            </template>
          </span>
        </span>
        <div class="is-pulled-right" v-if="!toggleForm">
          <div class="field is-grouped">
            <p class="control has-icons-left" v-if="toggleFilter && presets && presets.length > 0">
              <input type="search" v-model.lazy="query" class="input" id="filter"
                placeholder="Filter displayed content">
              <span class="icon is-left"><i class="fas fa-filter" /></span>
            </p>

            <p class="control" v-if="presets && presets.length > 0">
              <button class="button is-danger is-light" @click="toggleFilter = !toggleFilter">
                <span class="icon"><i class="fas fa-filter" /></span>
                <span v-if="!isMobile">Filter</span>
              </button>
            </p>

            <p class="control">
              <button class="button is-primary" @click="resetForm(false); toggleForm = !toggleForm;"
                v-tooltip.bottom="'Toggle add form'">
                <span class="icon"><i class="fas fa-add" /></span>
                <span v-if="!isMobile">New Preset</span>
              </button>
            </p>

            <p class="control">
              <button v-tooltip.bottom="'Change display style'" class="button has-tooltip-bottom"
                @click="() => display_style = display_style === 'list' ? 'grid' : 'list'">
                <span class="icon">
                  <i class="fa-solid"
                    :class="{ 'fa-table': display_style !== 'list', 'fa-table-list': display_style === 'list' }" /></span>
                <span v-if="!isMobile">
                  {{ display_style === 'list' ? 'List' : 'Grid' }}
                </span>
              </button>
            </p>

            <p class="control">
              <button class="button is-info" @click="reloadContent()" :class="{ 'is-loading': isLoading }"
                :disabled="isLoading" v-if="presets && presets.length > 0">
                <span class="icon"><i class="fas fa-refresh" /></span>
                <span v-if="!isMobile">Reload</span>
              </button>
            </p>
          </div>
        </div>
        <div class="is-hidden-mobile" v-if="!toggleForm">
          <span class="subtitle">Presets are pre-defined command options for yt-dlp that you want to apply to given
            download.</span>
        </div>
      </div>
    </div>

    <div class="columns" v-if="toggleForm">
      <div class="column is-12">
        <PresetForm :addInProgress="addInProgress" :reference="presetRef" :preset="preset" @cancel="resetForm(true)"
          @submit="updateItem" :presets="presets" />
      </div>
    </div>

    <template v-if="!toggleForm">
      <div class="columns is-multiline" v-if="!isLoading && presetsNoDefault && presetsNoDefault.length > 0">
        <template v-if="'list' === display_style">
          <div class="column is-12">
            <div class="table-container">
              <table class="table is-striped is-hoverable is-fullwidth is-bordered"
                style="min-width: 650px; table-layout: fixed;">
                <thead>
                  <tr class="has-text-centered is-unselectable">
                    <th width="80%">Preset</th>
                    <th width="20%">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="item in filteredPresets" :key="item.id">
                    <td class="is-text-overflow is-vcentered">
                      <div class="is-text-overflow is-bold">
                        {{ prettyName(item.name) }}
                      </div>
                      <div class="is-unselectable">
                        <span class="icon-text" :class="{ 'has-text-primary': item.cookies }">
                          <span class="icon"><i class="fa-solid fa-cookie" /></span>
                          <span>{{ item.cookies ? 'Has cookies' : 'No cookies' }}</span>
                        </span>
                        &nbsp;
                        <template v-if="item.priority > 0">
                          &nbsp;
                          <span class="icon-text">
                            <span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
                            <span>Priority: {{ item.priority }}</span>
                          </span>
                        </template>
                      </div>
                    </td>
                    <td class="is-vcentered is-items-center">
                      <div class="field is-grouped is-grouped-centered">
                        <div class="control">
                          <button class="button is-info is-small is-fullwidth" @click="exportItem(item)">
                            <span class="icon"><i class="fa-solid fa-file-export" /></span>
                            <span v-if="!isMobile">Export</span>
                          </button>
                        </div>
                        <div class="control">
                          <button class="button is-warning is-small is-fullwidth" @click="editItem(item)">
                            <span class="icon"><i class="fa-solid fa-cog" /></span>
                            <span v-if="!isMobile">Edit</span>
                          </button>
                        </div>
                        <div class="control">
                          <button class="button is-danger is-small is-fullwidth" @click="deleteItem(item)">
                            <span class="icon"><i class="fa-solid fa-trash" /></span>
                            <span v-if="!isMobile">Delete</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </template>

        <template v-else>
          <div class="column is-6" v-for="item in filteredPresets" :key="item.id">
            <div class="card is-flex is-full-height is-flex-direction-column">
              <header class="card-header">
                <div class="card-header-title is-block is-clickable"
                  :class="{ 'is-text-overflow': !isExpanded(item.id, 'title') }" @click="toggleExpand(item.id, 'title')"
                  :title="!isExpanded(item.id, 'title') ? 'Click to expand' : 'Click to collapse'" v-text="prettyName(item.name)" />
                <div class="card-header-icon">
                  <div class="field is-grouped">
                    <div class="control" v-if="item.priority > 0">
                      <span class="tag is-dark">
                        <span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
                        <span v-text="item.priority" />
                      </span>
                    </div>
                    <div class="control" v-if="item.cookies" v-tooltip="'This preset has cookies'">
                      <span class="icon has-text-primary"><i class="fa-solid fa-cookie" /></span>
                    </div>
                    <div class="control">
                      <button class="has-text-info" v-tooltip="'Export preset'" @click="exportItem(item)">
                        <span class="icon"><i class="fa-solid fa-file-export" /></span>
                      </button>
                    </div>
                  </div>
                </div>
              </header>
              <div class="card-content is-flex-grow-1">
                <div class="content">
                  <template v-if="item.priority > 0">
                    <p>
                      <span class="icon"><i class="fa-solid fa-sort-numeric-down" /></span>
                      <span>Priority: {{ item.priority }}</span>
                    </p>
                  </template>
                  <p :class="{ 'is-text-overflow': !isExpanded(item.id, 'folder'), 'is-clickable': true }"
                    v-if="item.folder" @click="toggleExpand(item.id, 'folder')"
                    :title="!isExpanded(item.id, 'folder') ? 'Click to expand' : 'Click to collapse'">
                    <span class="icon"><i class="fa-solid fa-save" /></span>
                    <span>{{ calcPath(item.folder) }}</span>
                  </p>
                  <p :class="{ 'is-text-overflow': !isExpanded(item.id, 'template'), 'is-clickable': true }"
                    v-if="item.template" @click="toggleExpand(item.id, 'template')"
                    :title="!isExpanded(item.id, 'template') ? 'Click to expand' : 'Click to collapse'">
                    <span class="icon"><i class="fa-solid fa-file" /></span>
                    <span>{{ item.template }}</span>
                  </p>
                  <p :class="{ 'is-text-overflow': !isExpanded(item.id, 'cli'), 'is-clickable': true }" v-if="item.cli"
                    @click="toggleExpand(item.id, 'cli')"
                    :title="!isExpanded(item.id, 'cli') ? 'Click to expand' : 'Click to collapse'">
                    <span class="icon"><i class="fa-solid fa-terminal" /></span>
                    <span>{{ item.cli }}</span>
                  </p>
                  <p :class="{ 'is-text-overflow': !isExpanded(item.id, 'description'), 'is-clickable': true }"
                    v-if="item.description" @click="toggleExpand(item.id, 'description')"
                    :title="!isExpanded(item.id, 'cli') ? 'Click to expand' : 'Click to collapse'">
                    <span class="icon"><i class="fa-solid fa-d" /></span>
                    <span>{{ item.description }}</span>
                  </p>
                </div>
              </div>
              <div class="card-content content m-1 p-1 is-overflow-auto" style="max-height: 300px;"
                v-if="item?.toggle_description">
                <div class="is-pre-wrap">{{ item.description }}</div>
              </div>
              <div class="card-footer mt-auto">
                <div class="card-footer-item">
                  <button class="button is-warning is-fullwidth" @click="editItem(item)">
                    <span class="icon"><i class="fa-solid fa-edit" /></span>
                    <span>Edit</span>
                  </button>
                </div>
                <div class="card-footer-item">
                  <button class="button is-danger is-fullwidth" @click="deleteItem(item)">
                    <span class="icon"><i class="fa-solid fa-trash" /></span>
                    <span>Delete</span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      <div class="columns is-multiline"
        v-if="!toggleForm && (isLoading || !filteredPresets || filteredPresets.length < 1)">
        <div class="column is-12">
          <Message v-if="isLoading" class="is-info" title="Loading" icon="fas fa-spinner fa-spin">
            Loading data. Please wait...
          </Message>
          <Message title="No Results" class="is-warning" icon="fas fa-search" v-else-if="query" :useClose="true"
            @close="query = ''">
            <p>No results found for the query: <code>{{ query }}</code>.</p>
            <p>Please try a different search term.</p>
          </Message>
          <Message v-else title="No presets" class="is-warning" icon="fas fa-exclamation-circle">
            There are no custom defined presets.
          </Message>
        </div>
      </div>

      <div class="columns is-multiline" v-if="!query && presets && presets.length > 0">
        <div class="column is-12">
          <Message class="is-info">
            <span class="icon"><i class="fas fa-info-circle" /></span>
            When you <b>export</b> preset, it doesn't include the <code>cookies</code> field contents for security
            reasons.
          </Message>
        </div>
      </div>
    </template>
  </main>
</template>

<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import type { Preset } from '~/types/presets'
import { useConfirm } from '~/composables/useConfirm'
import { usePresets } from '~/composables/usePresets'
import { prettyName } from '~/utils'

type PresetWithUI = Preset & { raw?: boolean, toggle_description?: boolean }

const presetsStore = usePresets()
const config = useConfigStore()
const box = useConfirm()

const display_style = useStorage<string>('preset_display_style', 'cards')
const isMobile = useMediaQuery({ maxWidth: 1024 })

const query = ref<string>('')
const toggleFilter = ref(false)

const presets = presetsStore.presets as Ref<PresetWithUI[]>
const preset = ref<Partial<Preset>>({})
const presetRef = ref<number | null>(null)
const toggleForm = ref(false)
const isLoading = presetsStore.isLoading
const addInProgress = presetsStore.addInProgress
const remove_keys = ['raw', 'toggle_description']
const expandedItems = ref<Record<string, Set<string>>>({})

const presetsNoDefault = computed(() => presets.value.filter((t) => !t.default))

const filteredPresets = computed<PresetWithUI[]>(() => {
  const q = query.value?.toLowerCase();
  if (!q) return presetsNoDefault.value;
  return presetsNoDefault.value.filter((item: PresetWithUI) => deepIncludes(item, q, new WeakSet()));
});

const toggleExpand = (itemId: number | string | undefined, field: string) => {
  if (itemId === undefined || itemId === null) return
  const key = String(itemId)

  if (!expandedItems.value[key]) {
    expandedItems.value[key] = new Set()
  }

  if (expandedItems.value[key].has(field)) {
    expandedItems.value[key].delete(field)
  } else {
    expandedItems.value[key].add(field)
  }
}

const isExpanded = (itemId: number | string | undefined, field: string): boolean => {
  if (itemId === undefined || itemId === null) return false
  const key = String(itemId)
  return expandedItems.value[key]?.has(field) ?? false
}


watch(toggleFilter, (val) => {
  if (!val) {
    query.value = ''
  }
})

const reloadContent = async () => {
  await presetsStore.loadPresets(1, 1000)
}

const resetForm = (closeForm = false) => {
  preset.value = {}
  presetRef.value = null
  if (closeForm) {
    toggleForm.value = false
  }
}

const deleteItem = async (item: Preset) => {
  if (true !== (await box.confirm(`Delete preset '${item.name}'?`))) {
    return
  }

  if (item.id) {
    await presetsStore.deletePreset(item.id)
  }
}

const updateItem = async ({
  reference,
  preset: item,
}: {
  reference: number | null
  preset: Preset
}) => {
  item = cleanObject(item, remove_keys) as Preset
  if (reference) {
    const updated = await presetsStore.updatePreset(reference, item)
    if (updated) {
      resetForm(true)
    }
  } else {
    const created = await presetsStore.createPreset(item)
    if (created) {
      resetForm(true)
    }
  }
}

const filterItem = (item: Preset) => {
  const rest = cleanObject(item, remove_keys)
  if ('default' in rest) {
    delete rest.default
  }
  return JSON.stringify(rest, null, 2)
}

const editItem = (item: Preset) => {
  preset.value = JSON.parse(filterItem(item))
  presetRef.value = item.id ?? null
  toggleForm.value = true
}

onMounted(async () => await reloadContent())

const exportItem = (item: Preset) => {
  const excludedKeys = ['id', 'default', 'raw', 'cookies', 'toggle_description']
  const userData = Object.fromEntries(
    Object.entries(JSON.parse(JSON.stringify(item))).filter(([key, value]) => !excludedKeys.includes(key) && value)
  )

  userData['_type'] = 'preset'
  userData['_version'] = '2.6'

  copyText(encode(userData))
}

const calcPath = (path?: string): string => {
  const loc = config.app.download_path || '/downloads'
  return path ? loc + '/' + sTrim(path, '/') : loc
}
</script>
