<template>
  <div class="container my-10 ">

    <UButton>Translations</UButton>
    <div class="flex items-start gap-30">
      <div class="flex flex-col gap-10">
        <p class="p-60 bg-yellow-300">img</p>
      </div>
      <div class="flex flex-col gap-2">
        <p class="text-[25px] font-bold">{{ productStore.productDescription.name }}</p>
        <p v-html="productStore.productDescription.description_short"></p>

        <div>
          <p>Ilość:</p>
          <div
            class="flex items-center w-[15%] border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-200">
            <button @click="decrement" class="px-3 py-1 cursor-pointer">-</button>
            <span class="px-6">{{ quantity }}</span>
            <button @click="increment" class="px-3 py-1 cursor-pointer">+</button>
          </div>
        </div>

        <div class="space-[10px]">
          <div class="flex gap-1 items-center">
            <UIcon name="lets-icons:done-ring-round-fill" class="text-[20px] text-green-600" />
            <p class=" gap-1text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">{{
              productStore.productDescription.available_now }}</p>
          </div>
          <div class="flex gap-1 items-center">
            <UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
            <p class="text-[18px] font-bold">{{ productStore.productDescription.delivery_in_stock }}</p>
          </div>
          <UButton class="cursor-pointer">
            <UIcon name="tdesign:cart-filled" class="text-[20px]" />
            <p> Dodaj do koszyka </p>
          </UButton>
        </div>
      </div>
    </div>

    <div class="mt-16">
      <div class="flex gap-4 m-2">
        <UButton @click="activeTab = 'description'"
          :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
          variant="outline">
          <p>Description</p>
        </UButton>

        <UButton @click="activeTab = 'usage'"
          :class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
          variant="outline">
          <p>Usage</p>
        </UButton>
      </div>

      <div v-if="activeTab === 'usage'">
        <div class="flex  items-center gap-3 mb-3">
          <UButton @click="usageEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
            <p>Create Text</p>
            <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
          </UButton>
          <UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
            <p>Save the edited text</p>
          </UButton>
        </div>
        <p ref="usageRef" v-html="productStore.productDescription.usage"
          class="p-8 flex flex-col justify-center w-full text-start border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark) dark:text-white text-black">
        </p>
      </div>

      <div v-if="activeTab === 'description'">
        <div class="flex items-center gap-3 mb-3">
          <UButton @click="descriptionEdit.enableEdit()" class="flex items-center gap-2 m-2 cursor-pointer">
            <p>Create Text</p>
            <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px]" />
          </UButton>
          <UButton @click="save" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
            <p>Save the edited text</p>
          </UButton>
        </div>
        <div ref="descriptionRef" v-html="productStore.productDescription.description"
          class="p-8 flex flex-col justify-center border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark) dark:text-white text-black">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useProductStore } from '@/stores/product'
import { useEditable } from '@/composable/useConteditable'

const activeTab = ref('description')
const productStore = useProductStore()
await productStore.getProductDescription()
await productStore.getProductDescriptionTranslations()

const quantity = ref(1)

const increment = () => {
  quantity.value += 1
}
const decrement = () => {
  if (quantity.value > 1) quantity.value -= 1
}
const descriptionRef = ref<HTMLElement | null>(null)
const usageRef = ref<HTMLElement | null>(null)

const descriptionEdit = useEditable(descriptionRef)
const usageEdit = useEditable(usageRef)

const save = async () => {
  const description = descriptionEdit.getCleanHtml()
  const usage = usageEdit.getCleanHtml()

  descriptionEdit.disableEdit()
  usageEdit.disableEdit()
  // await productStore.saveProductDescription({
  //   description,
  //   usage
  // })
}

</script>

<style>
.images {
  display: flex;
  align-items: center;
  gap: 70px;
  margin: 20px 0 20px 0;
}
</style>