<script setup lang="ts">
import image1 from '~/assets/example/1.jpg';
import image2 from '~/assets/example/2.jpg';
import image3 from '~/assets/example/3.jpg';
import OptionBlock from "~/pages/aigc/drawing/components/OptionBlock.vue";
import ResultBlock from "~/pages/aigc/drawing/components/ResultBlock.vue";
import {useLoginState} from "~/composables/useLoginState";
import ModalAuthentication from "~/components/ModalAuthentication.vue";

useHead({
  title: '绘画 | XSH AI'
})

const modal = useModal()
const loginState = useLoginState()

const leftSection = ref<HTMLElement | null>(null)
const leftHandler = ref<HTMLElement | null>(null)

const handle_mousedown = (e: MouseEvent, min: number = 240, max: number = 400) => {
  const handler = leftHandler.value
  if (handler) {
    const startX = e.clientX
    const startWidth = handler.parentElement?.offsetWidth || 0
    const handle_mousemove = (e: MouseEvent) => {
      let newWidth = startWidth + e.clientX - startX
      if (newWidth < min || newWidth > max) {
        newWidth = Math.min(Math.max(newWidth, min), max)
      }
      handler.parentElement!.style.width = `${newWidth}px`
    }
    const handle_mouseup = () => {
      leftSection.value?.classList.add('transition-all')
      leftHandler.value?.lastElementChild?.classList.remove('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
      window.removeEventListener('mousemove', handle_mousemove)
      window.removeEventListener('mouseup', handle_mouseup)
    }
    leftSection.value?.classList.remove('transition-all')
    leftHandler.value?.lastElementChild?.classList.add('bg-indigo-300', 'dark:bg-indigo-700', 'w-[3px]')
    window.addEventListener('mousemove', handle_mousemove)
    window.addEventListener('mouseup', handle_mouseup)
  }
}

const images = [
  image1,
  image2,
  image3,
  'https://w.wallhaven.cc/full/jx/wallhaven-jxl31y.png',
  'https://w.wallhaven.cc/full/6d/wallhaven-6d7xmx.jpg',
]
const images2 = [
  image1,
  image2,
  image3,
]
</script>

<template>
  <div class="w-full flex">
    <div ref="leftSection"
         class="sticky hidden md:block h-[calc(100vh-4rem)] overflow-hidden bg-neutral-200 dark:bg-neutral-800 transition-all"
         style="width: 320px">
      <div ref="leftHandler"
           class="absolute inset-0 left-auto hidden xl:flex flex-col justify-center items-center cursor-ew-resize px-1 group"
           @dblclick="leftSection?.style.setProperty('width', '320px')"
           @mousedown.prevent="handle_mousedown">
        <span
            class="w-[1px] h-full bg-neutral-300 dark:bg-neutral-700 group-hover:bg-indigo-300 dark:group-hover:bg-indigo-700 group-hover:w-[3px] transition-all group-hover:delay-500 translate-x-1"></span>
      </div>
      <div class="h-full p-4 flex flex-col gap-2 overflow-y-auto">
        <OptionBlock comment="Prompts" icon="i-tabler-article" label="提示词">
          <template #actions>
            <UBadge color="sky" size="xs">按钮A</UBadge>
            <UBadge color="indigo" size="xs">按钮B</UBadge>
          </template>
          <UTextarea :rows="2" autoresize placeholder="请输入英文提示词，每个提示词之间用英文逗号隔开" resize/>
        </OptionBlock>
        <OptionBlock comment="Negative Prompts" icon="i-tabler-article-off" label="负面提示词">
          <UTextarea :rows="2" autoresize placeholder="请输入作品中不要出现的提示词，每个提示词之间用英文逗号隔开"
                     resize/>
        </OptionBlock>
      </div>
    </div>
    <div class="flex-1 h-screen flex flex-col gap-4 bg-neutral-100 dark:bg-neutral-900 p-4 pb-20 overflow-y-auto">
      <div v-if="!loginState.is_logged_in"
           class="w-full h-full flex flex-col justify-center items-center gap-2 bg-neutral-100 dark:bg-neutral-900">
        <Icon name="i-tabler-user-circle" class="text-7xl text-neutral-300 dark:text-neutral-700"/>
        <p class="text-sm text-neutral-500 dark:text-neutral-400">请登录后使用</p>
        <UButton class="mt-2 font-bold" @click="modal.open(ModalAuthentication)" color="black" variant="solid"
                 size="xs">登录
        </UButton>
      </div>
      <ResultBlock v-else :images="images" v-for="i in 12" :key="i"
                   title="XX大模型 · 文生图" :meta="{
                          id: 'd166429411dfc6722e54c032cdba97a2',
                          aspect: '9:16',
                          cost: '1500',
                          modal: '混元大模型',
                          ratio: '16:9',
                          datetime: 1709106270
                       }"
                   prompt="这是, 一组, 测试用的, 提示词, 很长, 很长很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长, 很长">
        <template #header-right>
          <UButton color="gray" size="xs" icon="i-tabler-trash" variant="ghost"></UButton>
        </template>
      </ResultBlock>
    </div>
  </div>
</template>

<style scoped>

</style>