<script lang="ts" setup>
  import { CreateComponentType } from '/@/views/visual/packages/index.type';
  import { BasicForm, useForm } from '/@/components/Form';
  import {
    PublicComponentValueType,
    PublicFormInstaceType,
  } from '/@/views/visual/dataSourceBindPanel/index.type';
  import { DataSourceValueType, FormFieldEnum, formSchemas } from './datasource.config';
  import { DataSource, VideoConfigType } from '/@/views/visual/palette/types';

  defineProps<{
    values: PublicComponentValueType;
    componentConfig: CreateComponentType;
  }>();

  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
    labelWidth: 0,
    showActionButtonGroup: false,
    layout: 'horizontal',
    labelCol: { span: 0 },
    schemas: formSchemas,
  });

  const getFormValues = () => {
    const value = getFieldsValue() as DataSourceValueType;
    return {
      [FormFieldEnum.VIDEO_CONFIG]: value as VideoConfigType,
    };
  };

  const setFormValues = (record: DataSource) => {
    const { videoConfig = {} } = record;
    return setFieldsValue(videoConfig);
  };

  defineExpose({
    getFormValues,
    setFormValues,
    validate,
    resetFormValues: resetFields,
  } as PublicFormInstaceType);
</script>

<template>
  <BasicForm @register="register" />
</template>