<script setup lang="ts">
import type {ResultBlockMeta} from "~/components/aigc/drawing/index";
import type {PropType} from "vue";
import dayjs from "dayjs";

const props = defineProps({
  icon: {
    type: String,
    default: 'i-tabler-photo-filled'
  },
  title: {
    type: String
  },
  prompt: {
    type: String
  },
  images: {
    type: Array,
    default: (): Array<string> => []
  },
  meta: {
    type: Object as PropType<ResultBlockMeta>
  }
})

const expand_prompt = ref(false)
const show_meta = ref(true)
</script>

<template>
  <div class="w-full">
    <div class="flex items-center gap-1">
      <UIcon :name="icon"/>
      <h1 class="text-sm font-semibold">
        {{ title }}
      </h1>
      <UDivider class="flex-1" size="sm"/>
      <UButton color="black" size="xs" icon="i-tabler-info-circle"
               :variant="show_meta ? 'solid' : 'ghost'" :disabled="!meta"
               @click="show_meta = !show_meta"></UButton>
      <slot name="header-right"/>
    </div>
    <div v-if="prompt" class="flex items-start gap-2 mt-1 mb-2">
      <UIcon name="i-tabler-article" class="mt-0.5"/>
      <p class="text-sm flex-1 text-ellipsis cursor-pointer"
         :class="{'line-clamp-1': !expand_prompt, 'line-clamp-none': expand_prompt}"
         @click="expand_prompt = !expand_prompt">
        {{ prompt }}
      </p>
      <UButton color="gray" size="xs" icon="i-tabler-copy" variant="ghost" class="-mt-1"></UButton>
    </div>
    <div v-if="images.length > 0" class="flex items-center overflow-x-auto h-64 gap-2 pb-2 snap-x">
      <img v-for="(url, i) in images" class="result-image" :src="url" alt="" :key="i">
    </div>
    <Transition v-if="meta" name="meta">
      <div v-if="show_meta" class="w-full flex items-center gap-2 flex-wrap whitespace-nowrap pb-2 mt-2">
        <UBadge v-if="meta.modal" color="black" variant="solid" class="text-[10px] font-bold gap-0.5">
          <UIcon class="text-sm" name="i-tabler-box-seam"/>
          {{ meta.modal }}
        </UBadge>
        <UBadge v-if="meta.cost" color="amber" variant="subtle" class="text-[10px] font-bold gap-0.5">
          <UIcon class="text-sm" name="i-solar-fire-bold"/>
          {{ meta.cost }}
        </UBadge>
        <UBadge v-if="meta.ratio" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
          <UIcon class="text-sm" name="i-tabler-aspect-ratio"/>
          {{ meta.ratio }}
        </UBadge>
        <UBadge v-if="meta.id" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
          <UIcon class="text-sm" name="i-tabler-number"/>
          {{ meta.id }}
        </UBadge>
        <UBadge v-if="meta.datetime" color="indigo" variant="subtle" class="text-[10px] font-bold gap-0.5">
          <UIcon class="text-sm" name="i-tabler-calendar-month"/>
          {{ dayjs(meta.datetime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
        </UBadge>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.meta-enter-active,
.meta-leave-active {
  @apply transition duration-300;
}

.meta-enter-from,
.meta-leave-to {
  @apply opacity-0 -translate-y-2;
}

.result-image {
  @apply snap-start;
  @apply h-full aspect-auto object-cover rounded-lg shadow-md;
}
</style>