<script setup lang="ts">
import { ref, unref } from 'vue'
import { Button, InputGroup, InputPassword, Modal } from 'ant-design-vue'
import { Icon } from '@iconify/vue'
import { useParseParams } from '../LoadData'
import { BasicForm, useForm } from '@/components/Form'
import { ComponentEnum, FormLayoutEnum } from '@/components/Form/src/enum'
import { getShareDataByAccessCredentials } from '@/api/content'
import type { ConfigurationContentType } from '@/api/content/model'

enum FormField {
  PASSWORD = 'password',
}

const [registerForm, { getFieldsValue, validate }] = useForm({

  schemas: [
    {
      field: FormField.PASSWORD,
      label: '访问令牌',
      component: ComponentEnum.INPUT_PAWSSWORD,
      slot: 'password',
    },
  ],
  layout: FormLayoutEnum.VERTICAL,

})

const visible = ref(false)

const resolve = ref()

const open = async (): Promise<ConfigurationContentType> => {
  visible.value = true
  return new Promise((_resolve) => {
    resolve.value = _resolve
  })
}
const { configurationId } = useParseParams()

const handleOk = async () => {
  await validate()
  const value = getFieldsValue()
  try {
    const result = await getShareDataByAccessCredentials(configurationId!, value[FormField.PASSWORD])
    unref(resolve)(result.data)
    visible.value = false
  }
  catch (error) {
  }
}

defineExpose({ open })
</script>

<template>
  <Modal v-model:open="visible" :footer="null" :closable="false" :mask-closable="false">
    <BasicForm @register="registerForm" @submit="handleOk">
      <template #password="{ model, field }">
        <InputGroup compact class="!flex">
          <InputPassword v-model:value="model[field]" placeholder="请输入访问令牌" />
          <Button type="primary" class="!bg-blue-400 !w-30" @click="handleOk">
            <template #icon>
              <Icon icon="material-symbols:login" class="text-2xl" />
            </template>
          </Button>
        </InputGroup>
      </template>
    </BasicForm>
  </Modal>
</template>