/* eslint-disable max-len */
import { IReactConstantList, IReactOption } from '@wowpic/xform-types';
import { InputNumber, Rate, Slider, Upload } from 'antd';
import moment from 'moment';
import AutoComplete from './autoComplete';
import Cascader from './cascader';
import Checkbox from './checkbox';
import CheckboxAll from './checkboxAll';
import DatePicker from './datePicker';
import DateTimePicker from './dateTimePicker';
import Input from './input';
import MonthPicker from './monthPicker';
import Radio from './radio';
import RadioButton from './radioButton';
import RangePicker from './rangePicker';
import Select from './select';
import Switch from './switch';
import TextArea from './textArea';
import TimePicker from './TimePicker';
import Transfer from './transfer';
import TreeSelect from './treeSelect';
import WeekPicker from './weekPicker';

const findOption = (
    value: string | number,
    options: IReactOption[] = []
): IReactOption | null => options.find((option) => option.value === value);

const findLabel = (
    value: string | number,
    options: IReactOption[] = []
): string => (findOption(value, options) || {}).label || '';

const value2Label = (values: string[] = [], options: IReactOption[] = []) => values.map((value) => findLabel(value, options)).filter((label) => label);

export { AutoComplete, Cascader, Checkbox, CheckboxAll, DatePicker, DateTimePicker, Input, MonthPicker, Radio, RadioButton, RangePicker, Select, Switch, TextArea, TimePicker, Transfer, TreeSelect, WeekPicker };

export const COMPONENT_LIST: IReactConstantList = [
    {
        name: 'Input',
        component: Input
    },
    {
        name: 'TextArea',
        component: TextArea
    },
    {
        name: 'InputNumber',
        component: InputNumber
    },
    {
        name: 'Switch',
        component: Switch,
        hideIcon: true,
        preview: (value) => (value ? '是' : '否')
    },
    {
        name: 'Radio',
        component: Radio,
        hideIcon: true,
        preview: (value, options) => findLabel(value, options) || ''
    },
    {
        name: 'RadioGroup',
        component: Radio,
        hideIcon: true,
        preview: (value, options) => findLabel(value, options) || ''
    },
    {
        name: 'RadioButton',
        component: RadioButton,
        hideIcon: true,
        preview: (value, options) => findLabel(value, options) || ''
    },
    {
        name: 'Checkbox',
        component: Checkbox,
        hideIcon: true,
        preview: (value, options) => value2Label(value, options).join('、')
    },
    {
        name: 'CheckboxGroup',
        component: Checkbox,
        hideIcon: true,
        preview: (value, options) => value2Label(value, options).join('、')
    },
    {
        name: 'CheckboxAll',
        component: CheckboxAll,
        hideIcon: true,
        preview: (value, options) => value2Label(value, options).join('、')
    },
    {
        name: 'Select',
        component: Select,
        preview: (value, options) => (typeof value === 'string' || typeof value === 'number'
            ? findLabel(value, options) || ''
            : value2Label(value, options).join('、'))
    },
    {
        name: 'Cascader',
        component: Cascader,
        preview: (value, options) => value
            .reduce(
                (
                    [result, children]: [string[], IReactOption[]],
                    cur: string | number
                ) => {
                    const target = findOption(cur, children);
                    if (target) {
                        result.push(findLabel(cur, children));
                        return [result, target.children];
                    }
                    return [result, children];
                },
                [[], options]
            )[0]
            .join('>')
    },
    {
        name: 'TreeSelect',
        component: TreeSelect
    },
    {
        name: 'DatePicker',
        component: DatePicker,
        preview: (value) => moment(value).format('YYYY-MM-DD')
    },
    {
        name: 'TimePicker',
        component: TimePicker,
        preview: (value) => moment(value).format('HH:mm:ss')
    },
    {
        name: 'DateTimePicker',
        component: DateTimePicker,
        preview: (value) => moment(value).format('YYYY-MM-DD HH:mm:ss')
    },
    {
        name: 'MonthPicker',
        component: MonthPicker
    },
    {
        name: 'WeekPicker',
        component: WeekPicker
    },
    {
        name: 'RangePicker',
        component: RangePicker,
        preview: ([startTime, endTime]) => `${moment(startTime).format('YYYY-MM-DD HH:mm:ss')} 至 ${moment(
            endTime
        ).format('YYYY-MM-DD HH:mm:ss')}`
    },
    {
        name: 'AutoComplete',
        component: AutoComplete
    },
    {
        name: 'Rate',
        component: Rate,
        hideIcon: true
    },
    {
        name: 'Slider',
        component: Slider,
        hideIcon: true
    },
    {
        name: 'Transfer',
        component: Transfer,
        hideIcon: true
    },
    {
        name: 'Upload',
        component: Upload,
        hideIcon: true
    }
];