import { Form, Input, Button } from 'antd';
import type { DatasetConfig } from '../../models/dataset-manager';
import type { AddDatasetFormProps } from './types';

export default function AddDatasetForm(props: AddDatasetFormProps) {
  const { onDatasetAdd } = props;

  const handleFinish = (value: Pick<DatasetConfig, 'url' | 'name'>) => {
    const { url, name } = value;
    onDatasetAdd(url, name);
  };

  return (
    <Form name="add-dataset-form" labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} onFinish={handleFinish}>
      <Form.Item
        label="URL"
        name="url"
        rules={[{ required: true, message: 'Please input the JSON URL' }, { type: 'url' }]}
      >
        <Input placeholder="Please input the JSON URL" />
      </Form.Item>

      <Form.Item label="Name" name="name" rules={[{ required: true, message: 'Please input the dataset name' }]}>
        <Input placeholder="Please input the dataset name" />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
        <Button type="primary" htmlType="submit">
          Add New Dataset
        </Button>
      </Form.Item>
    </Form>
  );
}