import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import { Button, Flex, Form, Input, InputNumber } from 'antd';
import React from 'react';
import { ParameterType, getFormOptions, parameterTooltip } from '../utils';
import styles from './index.less';

type ParameterRangeProps = {
  type: ParameterType;
  value?: any[];
  onCancel?: () => void;
  onConfirm?: (value: any[]) => void;
};

function ParameterRange({ type, value, onConfirm }: ParameterRangeProps) {
  const [form] = Form.useForm();
  const isList = type === ParameterType.Choice || type === ParameterType.Grid;
  const formOptions = getFormOptions(type, value);

  const initialValues = isList
    ? { list: value && value.length > 0 ? value.map((item) => ({ value: item })) : [{ value: '' }] }
    : formOptions.reduce((prev, item) => {
        prev[item.name] = item.value;
        return prev;
      }, {} as Record<string, any>);

  const handleFinish = (values: any) => {
    if (type === ParameterType.Choice || type === ParameterType.Grid) {
      const array = values.list.map((item: any) => item.value);
      onConfirm?.(array);
    } else {
      const numbers = Object.values(values).map((item: any) => Number(item));
      onConfirm?.(numbers);
    }
  };

  return (
    <div className={styles['parameter-range']}>
      <div className={styles['parameter-range__type']}>{type}</div>
      <div className={styles['parameter-range__desc']}>{parameterTooltip[type]}</div>
      <Form
        // labelCol={{ flex: '0' }}
        // wrapperCol={{ flex: '1' }}
        labelAlign="left"
        form={form}
        onFinish={handleFinish}
        size="middle"
        autoComplete="off"
        scrollToFirstError
        initialValues={initialValues}
        layout={isList ? 'horizontal' : 'inline'}
        className={styles['parameter-range__form']}
      >
        {isList ? (
          <div className={styles['parameter-range__form__list']}>
            <Form.List name="list">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }, index) => (
                    <Flex key={key} align="center">
                      <Form.Item
                        style={{ flex: 1, minWidth: 0 }}
                        {...restField}
                        name={[name, 'value']}
                        rules={[{ required: true, message: '必填' }]}
                      >
                        <Input placeholder="请输入" allowClear />
                      </Form.Item>
                      <Flex
                        style={{
                          marginLeft: '10px',
                          marginBottom: '24px',
                          flex: 'none',
                          width: '66px',
                        }}
                        align="center"
                      >
                        <Button
                          shape="circle"
                          size="middle"
                          type="text"
                          disabled={fields.length === 1}
                          icon={<MinusCircleOutlined />}
                          onClick={() => remove(name)}
                        ></Button>
                        {index === fields.length - 1 && (
                          <Button
                            shape="circle"
                            size="middle"
                            type="text"
                            onClick={() => add()}
                            icon={<PlusCircleOutlined />}
                          ></Button>
                        )}
                      </Flex>
                    </Flex>
                  ))}
                  {fields.length === 0 && (
                    <Form.Item className={styles['add-weight']}>
                      <Button
                        className={styles['add-weight__button']}
                        color="primary"
                        variant="dashed"
                        onClick={() => add()}
                        block
                        icon={<PlusCircleOutlined />}
                      >
                        添加
                      </Button>
                    </Form.Item>
                  )}
                </>
              )}
            </Form.List>
          </div>
        ) : (
          <Flex align="start" style={{ width: '100%', marginBottom: '20px' }}>
            {formOptions.map((item, index) => {
              return (
                <React.Fragment key={item.name}>
                  <Form.Item
                    name={item.name}
                    style={{ flex: 1, marginInlineEnd: 0 }}
                    rules={[
                      {
                        required: true,
                        message: `必填`,
                      },
                    ]}
                  >
                    <InputNumber style={{ width: '100%' }} placeholder={item.name} />
                  </Form.Item>
                  {index !== formOptions.length - 1 && (
                    <span className={styles['parameter-range__form__space']}>
                      {index === 0 ? '-' : '  '}
                    </span>
                  )}
                </React.Fragment>
              );
            })}
          </Flex>
        )}
        <Form.Item layout="horizontal" className={styles['parameter-range__form__button']}>
          <Button type="primary" htmlType="submit" style={{ width: '100%', height: '36px' }}>
            确定
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

export default ParameterRange;
