<script lang="ts" setup>
import { Button, Divider } from 'ant-design-vue'
import { nextTick, onMounted, ref, unref } from 'vue'
import { formSchemas } from '../config'
import { ChartComponentEnum } from '..'

import { DataSourceForm } from '../component/index'
// import { DataSourceForm } from '@/core/Library/components/PublicForm/components/DataSourceForm'

import { BasicForm, useForm } from '@/components/Form'
import { FormLayoutEnum } from '@/components/Form/src/enum'
import { useNodeData } from '@/core/Library/hook/useNodeData'
import type { ConfigComponentProps } from '@/core/Library/types'
import { createPublicFormContext } from '@/core/Library/components/PublicForm/usePublicFormContext'
import { useMessage } from '@/hooks/web/useMessage'
import { useSavePageContent } from '@/core/Library/hook/useSavePageContent'
import { useContentDataStoreWithOut } from '@/store/modules/contentData'
import { useTranslation } from '@/hooks/useTranslation'

const props = defineProps<ConfigComponentProps>()

const { t } = useTranslation()

const loading = ref(false)

const nodeDataActinType = useNodeData({ cell: props.cell!, immediate: false })

const { getNodeData, getNodeAllData, saveNodeAllData } = nodeDataActinType

const [register, { getFieldsValue, setFieldsValue, validate }] = useForm({
  schemas: formSchemas(ChartComponentEnum.LINE),
  showActionButtonGroup: false,
  layout: FormLayoutEnum.HORIZONTAL,
  labelWidth: 70,
})

const dataSourceElRef = ref<Nullable<InstanceType<typeof DataSourceForm>>>()

const handleSetFormValues = async () => {
  const { dataSourceJson } = unref(getNodeData) || {}
  const { deviceId, attr, chartOption, deviceProfileId, deviceProfileTemplateId, deviceName } = dataSourceJson || {}
  await nextTick()
  unref(dataSourceElRef)?.setFieldsValue({ deviceId, attr, deviceProfileId, deviceProfileTemplateId, deviceName })
  setFieldsValue({ ...chartOption })
}

const { createMessage } = useMessage()
const { savePageContent } = useSavePageContent()
const contentDataStore = useContentDataStoreWithOut()

const handleSubmit = async () => {
  try {
    loading.value = true
    await unref(dataSourceElRef)?.validate()
    await validate()
    const value = unref(dataSourceElRef)?.getFieldsValue()
    const values = getFieldsValue()
    let dataSourceJson = value
    if (contentDataStore.getIsTemplate)
      dataSourceJson = { ...value, deviceProfileId: value?.deviceProfileTemplateId, deviceId: null, deviceName: null }

    saveNodeAllData({ dataSourceJson: { ...dataSourceJson, attr: typeof value.attr == 'string' ? [value.attr] : value.attr, chartOption: { ...values } } })
    createMessage.success(t('operationSuccessful'))
    savePageContent()
  }
  finally {
    loading.value = false
  }
}

onMounted(async () => {
  await getNodeAllData()
  handleSetFormValues()
})

createPublicFormContext(nodeDataActinType)
</script>

<template>
  <main class="form-container px-4">
    <Divider orientation="left">
      {{ t('dataSource') }}
    </Divider>
    <DataSourceForm ref="dataSourceElRef" />
    <Divider orientation="left">
      {{ t('displayType') }}
    </Divider>
    <BasicForm @register="register" />
    <Button type="primary" class="w-full" :loading="loading" @click="handleSubmit">
      {{ t('save') }}
    </Button>
  </main>
</template>

<style lang="less" scoped>
.form-container {
  @apply text-sm;

  :deep(.ant-divider) {
    @apply text-sm;
  }
}
</style>