<script lang="ts" setup>
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { FieldsEnum, schemas, ViewTypeEnum } from './config';
  import { DataBoardRecord } from '/@/api/dataBoard/model';
  import { Alert, Button, Tooltip } from 'ant-design-vue';
  import { ref, unref } from 'vue';
  import { nextTick } from 'vue';
  import { ModalParamsType } from '/#/utils';
  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { computed } from 'vue';

  const props = defineProps<{
    shareApi?: (...args: any[]) => Promise<any>;
  }>();

  const loading = ref(false);
  const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
  const link = ref('');

  const [register, { closeModal }] = useModalInner(
    async (data: ModalParamsType<DataBoardRecord>) => {
      const { record: value, href } = data;
      record.value = value;
      link.value = href;
      await nextTick();
      setFieldsValue({
        [FieldsEnum.IS_SHARE]: value.viewType === ViewTypeEnum.PUBLIC_VIEW,
        [FieldsEnum.ACCESS_CREDENTIALS]: value.accessCredentials,
      });
    }
  );

  const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
    schemas,
    showActionButtonGroup: false,
    layout: 'inline',
    labelWidth: 120,
  });

  const emit = defineEmits(['register', 'success']);

  const handleOpenLink = () => {
    window.open(unref(link));
  };

  const handleSubmit = async () => {
    try {
      loading.value = true;
      const value = getFieldsValue();
      const { id } = unref(record);
      await props?.shareApi?.({ id, ...value });
      closeModal();
      emit('success');
    } finally {
      loading.value = false;
    }
  };

  const isPublicState = computed(() => {
    return unref(record).viewType === ViewTypeEnum.PUBLIC_VIEW;
  });

  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
  const { createMessage } = useMessage();
  const handleCopy = () => {
    clipboardRef.value = unref(link);
    if (unref(isSuccessRef)) {
      createMessage.success('复制成功~');
    }
  };
</script>

<template>
  <BasicModal title="分享" @register="register" @ok="handleSubmit" :okButtonProps="{ loading }">
    <Alert
      class="!mb-4"
      type="info"
      message="私有视图只有项目成员可以浏览,公开视图拥有一个公开的 URL,任何人无需登录即可浏览."
    />
    <BasicForm @register="registerForm" />
    <section>
      <div v-if="isPublicState" class="mt-4">
        <span> 设置分享后, 可通过如下 </span>
        <Button type="link" class="!px-1" @click="handleOpenLink"> 链接 </Button>
        <span>访问:</span>
      </div>
      <Tooltip v-if="isPublicState" title="点击复制链接">
        <div
          class="px-4 py-2 my-2 bg-gray-50 font-semibold tracking-wider text-base cursor-pointer truncate"
          @click="handleCopy"
        >
          <span>{{ link }}</span>
        </div>
      </Tooltip>

      <Alert type="warning">
        <template #message>
          <span class="font-bold mr-1">提示:</span>
          <span>不要忘记将相关设备 <span class="mx-1 font-bold">公开</span> 以访问其数据</span>
        </template>
      </Alert>
    </section>
  </BasicModal>
</template>