import ResourceSelect, {
  ResourceSelectorType,
  requiredValidator,
} from '@/components/ResourceSelect';
import SubAreaTitle from '@/components/SubAreaTitle';
import { Col, Form, Input, Row } from 'antd';

function DatasetConfig() {
  return (
    <>
      <SubAreaTitle
        title="数据集配置"
        image={require('@/assets/img/dataset-config-icon.png')}
        style={{ marginTop: '20px', marginBottom: '24px' }}
      ></SubAreaTitle>
      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="数据集"
            name="dataset"
            rules={[
              {
                validator: requiredValidator,
                message: '请选择数据集',
              },
            ]}
            required
          >
            <ResourceSelect
              type={ResourceSelectorType.Dataset}
              placeholder="请选择数据集"
              canInput={false}
            />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={8}>
        <Col span={10}>
          <Form.Item
            label="预测目标列"
            name="target_columns"
            rules={[
              {
                required: true,
                message: '请输入预测目标列',
              },
            ]}
            tooltip="数据集 csv 文件中哪几列是预测目标列，逗号分隔"
          >
            <Input placeholder="请输入预测目标列" maxLength={64} showCount allowClear />
          </Form.Item>
        </Col>
      </Row>
    </>
  );
}

export default DatasetConfig;
