<script setup lang="ts">
import {useStyleStore} from "~/stores/style";
import {useSettingsStore} from "~/stores/settings";
import {useDomainStore} from "~/stores/domain";

const styleStore = useStyleStore()
const settingsStore = useSettingsStore()
const {t} = useI18n()
const timeStore = useTimeStore()
styleStore.setIsPage(true)

const {isHistory} = storeToRefs(settingsStore)
const isOpen = ref(false)

const isEditDomainOpen = ref(false)

const handleReset = async () => {
  settingsStore.setHistory(true)
  settingsStore.setLinkOpenType('currentWindow')
  styleStore.setHistory([])
  timeStore.setTimeZones('UTC+8')
  timeStore.setDnsServer('')
  await refreshNuxtData()
  isOpen.value = false
}

</script>

<template>
  <div class="setting">
    <div class="text-2xl font-bold mt-[30px] mb-[20px]">{{ t('settings.title') }}</div>
    <UCard>
       <div class="flex justify-between items-center">
          <div class="text-base	">{{ t('settings.history') }}</div>
          <div>
            <UToggle v-model="isHistory" />
          </div>
        </div>
    </UCard>
  </div>

  <div class="setting">
    <div class="text-2xl font-bold mt-[30px] mb-[20px]"> 后缀设置 </div>
    <u-card class="set-item">
      <div class="flex justify-between items-center">
        <div class="text-base"> 自定义后缀 </div>
        <div class="text-sm			" >
          自定义编辑管理添加后缀
        </div>
        <div>
          <u-button type="warning"
                    @click="isEditDomainOpen = true"
          > 管理 </u-button>
        </div>
      </div>

      <UModal
          v-model="isEditDomainOpen"
      >
        <UCard
            :ui="{
          base: 'h-full flex flex-col',
          rounded: '10',
          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
          body: {
            base: 'grow'
          }
        }"
        >
          <template #header>
            <div class="flex items-center justify-between">
              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
                后缀管理
              </h3>
              <UButton
                  color="gray"
                  variant="ghost"
                  icon="i-heroicons-x-mark-20-solid"
                  class="-my-1"
                  type="button"
                  @click="isEditDomainOpen = false" />
            </div>
          </template>
          <div class="mx-auto">
            <DomainEditor />
          </div>
        </UCard>
      </UModal>
    </u-card>
  </div>

  <div class="setting">
    <div class="text-2xl font-bold mt-[30px] mb-[20px]">{{ t('settings.linkOpenType') }}</div>
    <UCard>
      <div class="flex justify-between items-center">
        <div class="text-base	"> {{ t('settings.linkOpenTypeDesc') }} </div>
        <div>
          <ClientOnly>
          <CommonLinkChange />
          </ClientOnly>
        </div>
      </div>
    </UCard>
  </div>


  <div class="setting">
    <div class="text-2xl font-bold mt-[30px] mb-[20px]"> {{ t('settings.miscellaneous') }} </div>
    <u-card class="set-item">
      <div class="flex justify-between items-center">
        <div class="text-base">{{ t('settings.reset') }} </div>
        <div class="text-sm			" >
          {{ t('settings.resetDesc') }}
        </div>
        <div>
          <u-button type="warning"
                    @click="isOpen = true"
          > {{ t('common.actions.reset') }} </u-button>
        </div>
      </div>

        <UModal
            v-model="isOpen"
        >
          <UCard
              :ui="{
          base: 'h-full flex flex-col',
          rounded: '',
          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
          body: {
            base: 'grow'
          }
        }"
          >
            <template #header>
              <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
                  Modal
                </h3>
                <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
              </div>
            </template>

            <div class="p-4 m-auto text-center">
              {{ t('settings.resetConfirm') }}
            </div>
            <div class="flex justify-end">
              <UButton
                  @click="handleReset"
                  class="my-1">
                {{ t('common.actions.confirm') }}
              </UButton>
            </div>
          </UCard>
        </UModal>
    </u-card>
  </div>
</template>

<style scoped>

</style>
