import React from 'react';
import { Form } from 'antd';

import { StateInfo, ProjectStateConfig, FileInfo } from '@easytwin/core';

export interface GroupFormProp {
  dataSource: StateInfo['config'];
  onChange: (data: ProjectStateConfig) => void;
}

type FormValuesChangeType = Omit<ProjectStateConfig, 'hdrFileId'> & {
  hdrFileId: FileInfo;
};

const GroupForm: React.FC<GroupFormProp> = function ({ dataSource, onChange }) {
  const [form] = Form.useForm();

  React.useEffect(() => {
    form.setFieldsValue(dataSource);
  }, [form, dataSource]);

  return (
    <Form
      form={form}
      className="!px-1"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      labelAlign="left"
      colon={false}
      onValuesChange={(_, allValues: FormValuesChangeType) => {
        //
      }}>
      {/*  */}
    </Form>
  );
};

export default GroupForm;