/** @format */

import * as React from 'react';
import Button from '../button';
import {Checkbox, Switch, Tooltip, Upload, Icon, Row, Col, Input, Form, Select, Popconfirm, Typography} from 'antd';
import {ParamsTypes} from '../../const/status';
const {Paragraph} = Typography;
const {Option} = Select;
const allOptions: any[] = [];

Object.keys(ParamsTypes).map(element => {
    if (isNaN(element as any)) {
        allOptions.push({
            value: element,
            key: element,
            label: element,
        });
    }
});
const structOtions = [
    {
        value: 'struct',
        key: 'struct',
        label: 'struct',
    },
    {
        value: 'list-int',
        key: 'list-int',
        label: 'list-int',
    },
    {
        value: 'list-string',
        key: 'list-string',
        label: 'list-string',
    },
    {
        value: 'list-bool',
        key: 'list-bool',
        label: 'list-bool',
    },
    {
        value: 'list-float',
        key: 'list-float',
        label: 'list-float',
    },
    {
        value: 'list-struct',
        key: 'list-struct',
        label: 'list-struct',
    },
];

export interface ValueProps {
    id: string;
    required: boolean;
    selected: boolean;
    name: string;
    mean: string;
    type: string;
    child: ValueProps[];
    in: string;
}

export interface Iprops {
    values: ValueProps;
    onAdd: (id: string) => void;
    isCheckbox?: boolean;
    isEditable?: boolean; //是否可编辑(比如入商户 权限就不允许编辑)
    onDelete?: (id: string) => void;
    onChange: (value: ValueProps) => void;
    requestType: 'request' | 'response';
    mode?: 'query' | 'config';
    parentType?: string;
}
const SelectedComponent = (props: {value: boolean; onChange: (value: any) => void}) => {
    return (
        <Form.Item style={{marginBottom: 0}}>
            <Checkbox checked={props.value} onChange={event => props.onChange({selected: event.target.checked})} />
        </Form.Item>
    );
};
const NameComponent = (props: {value: string; isEditable?: boolean; onChange: (value: any) => void}) => {
    const {isEditable = true, value, onChange} = props;
    return (
        <Form.Item
            style={{marginBottom: 0}}
            label='参数名'
            labelCol={{xxl: {span: 5}, lg: {span: 8}}}
            wrapperCol={{xxl: {span: 19}, lg: {span: 16}}}
        >
            <Tooltip placement='topLeft' title=''>
                {isEditable ? (
                    <Input
                        onChange={event => onChange({name: event.target.value})}
                        value={value}
                        placeholder='请设置参数名'
                    />
                ) : (
                    <Paragraph style={{marginBottom: 0}} ellipsis>
                        {value || '--'}
                    </Paragraph>
                )}
            </Tooltip>
        </Form.Item>
    );
};
const MeanComponent = (props: {value: string; isEditable?: boolean; onChange: (value: any) => void}) => {
    const {isEditable = true, value, onChange} = props;

    return (
        <Form.Item
            style={{marginBottom: 0}}
            label='参数含义'
            labelCol={{xxl: {span: 6}, lg: {span: 8}}}
            wrapperCol={{xxl: {span: 18}, lg: {span: 16}}}
        >
            <Tooltip placement='topLeft' title={value}>
                {isEditable ? (
                    <Input
                        onChange={event => onChange({mean: event.target.value})}
                        value={value}
                        placeholder='请设置参数含义'
                    />
                ) : (
                    <Paragraph style={{marginBottom: 0}} ellipsis>
                        {value || '--'}
                    </Paragraph>
                )}
            </Tooltip>
        </Form.Item>
    );
};
const TypeComponent = (props: {
    value: string;
    isEditable?: boolean;
    options?: any[];
    onChange: (value: any) => void;
}) => {
    const {value, isEditable = true, onChange, options = allOptions} = props;
    return (
        <Form.Item
            style={{marginBottom: 0}}
            label='字段类型'
            labelCol={{xxl: {span: 8}, lg: {span: 10}}}
            wrapperCol={{xxl: {span: 16}, lg: {span: 14}}}
        >
            {isEditable ? (
                <Select value={value} onChange={value => onChange({type: value})}>
                    {options.map(element => {
                        return (
                            <Option key={element.key} value={element.value}>
                                {element.label}
                            </Option>
                        );
                    })}
                </Select>
            ) : (
                value
            )}
        </Form.Item>
    );
};
const InputComponent = (props: {
    value: string;
    requestType?: 'request' | 'response';
    onChange: (value: any) => void;
}) => {
    const {value, onChange, requestType = 'request'} = props;
    const placeholderText = requestType === 'request' ? '请设置输入字段' : '请设置输出字段';
    const labelText = requestType === 'request' ? '输入字段' : '输出字段';
    return (
        <Form.Item
            style={{marginBottom: 0}}
            labelCol={{xxl: {span: 6}, lg: {span: 7}}}
            wrapperCol={{xxl: {span: 18}, lg: {span: 17}}}
            label={labelText}
        >
            <Tooltip trigger='focus' title={value}>
                <Input
                    value={value}
                    onChange={event => onChange({in: event.target.value})}
                    allowClear
                    placeholder={placeholderText}
                />
            </Tooltip>
        </Form.Item>
    );
};
const RequiredComponent = (props: {value: boolean; onChange: (value: any) => void}) => {
    return (
        <Form.Item style={{marginBottom: 0}}>
            <Switch
                onChange={checked => props.onChange({required: checked})}
                checked={props.value}
                checkedChildren={`必选`}
                unCheckedChildren='非必选'
            />
        </Form.Item>
    );
};
const UploadComponet = () => {
    return (
        <Upload
            accept='image/*'
            beforeUpload={(file, fileList) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => {
                    if (reader.result && typeof reader.result === 'string') {
                        const inValue = reader.result.split(',')[1];
                    }
                };
                return false;
            }}
            showUploadList={false}
        >
            <Button>
                <Icon type='upload' /> 选择图片
            </Button>
        </Upload>
    );
};

const Parameter: React.FC<Iprops> = props => {
    const {values, mode = 'config', requestType, onAdd, isEditable, onChange, parentType = '', onDelete} = props;
    const [state, setState] = React.useState(values);
    React.useEffect(() => {
        setState(values);
    }, [values]);
    const handleChange = (value: any) => {
        onChange && onChange({...state, ...value});
        setState(preState => ({...preState, ...value}));
    };
    if (mode === 'query') {
        return (
            <Row gutter={12}>
                <Col lg={5} xxl={5}>
                    <NameComponent isEditable={false} value={state.name} onChange={handleChange} />
                </Col>
                <Col lg={5} xxl={5}>
                    <MeanComponent isEditable={false} value={state.mean} onChange={handleChange} />
                </Col>
                <Col lg={4} xxl={4}>
                    <TypeComponent isEditable={false} value={state.type} onChange={handleChange} />
                </Col>
                {state.type !== 'struct' && !parentType.includes('list') ? (
                    <React.Fragment>
                        <Col lg={7} xxl={7}>
                            <InputComponent requestType={requestType} value={state.in} onChange={handleChange} />
                        </Col>
                        {state.type === 'string' ? (
                            <Col lg={3} xxl={3}>
                                <UploadComponet />
                            </Col>
                        ) : null}
                    </React.Fragment>
                ) : null}
            </Row>
        );
    }
    const isComplexType = !!structOtions.filter(element => state.type === element.key).length;
    const options = !state.child.length ? allOptions : structOtions;
    return (
        <Row gutter={12}>
            <Col span={1}>
                <SelectedComponent value={state.selected} onChange={handleChange} />
            </Col>
            <Col lg={4} xxl={5}>
                <NameComponent isEditable={isEditable} value={state.name} onChange={handleChange} />
            </Col>
            <Col lg={5} xxl={5}>
                <MeanComponent isEditable={isEditable} value={state.mean} onChange={handleChange} />
            </Col>
            <Col lg={4} xxl={4}>
                <TypeComponent options={options} isEditable={isEditable} value={state.type} onChange={handleChange} />
            </Col>
            {state.type !== 'struct' && !parentType.includes('list') ? (
                <Col lg={6} xxl={5}>
                    <InputComponent requestType={requestType} value={state.in} onChange={handleChange} />
                </Col>
            ) : null}
            <Col lg={2} xxl={2}>
                <RequiredComponent value={state.required} onChange={handleChange} />
            </Col>
            {isEditable ? (
                <Col lg={2} xxl={2}>
                    <Form.Item style={{marginBottom: 0}}>
                        <Popconfirm
                            title='是否确认删除?'
                            okText='是'
                            cancelText='否'
                            onConfirm={() => {
                                if (onDelete) {
                                    onDelete(state.id);
                                }
                            }}
                        >
                            <Button type='danger' shape='circle' icon='delete' size='small' style={{marginRight: 10}} />
                        </Popconfirm>
                        {isComplexType ? (
                            <Button
                                size='small'
                                onClick={() => {
                                    if (onAdd) {
                                        onAdd(state.id);
                                    }
                                }}
                                type='primary'
                                shape='circle'
                                icon='plus'
                            />
                        ) : null}
                    </Form.Item>
                </Col>
            ) : null}
        </Row>
    );
};

// class Parameter extends React.Component<ParameterProps, {value: ValueProps}> {
//     constructor(props) {
//         super(props);
//         this.state = {
//             value: props.values,
//         };
//     }
//     componentWillReceiveProps(nextProps) {
//         this.setState(preState => ({...preState, value: nextProps.values}));
//     }

//     render() {
//         const {isEditable, onAdd, onDelete, values, requestType, onChange, mode} = this.props;
//         return (
//             <Row
//                 style={{fontSize: 12}}
//                 type='flex'
//                 align='middle'
//                 justify='start'
//                 gutter={12}
//                 onClick={event => event.stopPropagation()}
//             >
//                 {mode === 'config' ? (
//                     <Col lg={1} xxl={1} style={{textAlign: 'center'}}>
//                         <Form.Item style={{marginBottom: 0}}>
//                             <Checkbox
//                                 checked={this.state.value.selected}
//                                 onChange={event => {
//                                     this.setState(preState => {
//                                         onChange({
//                                             ...preState.value,
//                                             selected: event.target.checked,
//                                         });
//                                         return {
//                                             ...preState,
//                                             value: {
//                                                 ...preState.value,
//                                                 selected: event.target.checked,
//                                             },
//                                         };
//                                     });
//                                 }}
//                             />
//                         </Form.Item>
//                     </Col>
//                 ) : null}

//                 <Col lg={isEditable ? 5 : 5} xxl={5}>
//                     <Form.Item
//                         style={{marginBottom: 0}}
//                         label='参数名'
//                         labelCol={{xxl: {span: 5}, lg: {span: 7}}}
//                         wrapperCol={{xxl: {span: 19}, lg: {span: 17}}}
//                     >
//                         <Tooltip
//                             placement='topLeft'
//                             title={this.state.value.name ? this.state.value.name : '请设置参数名'}
//                         >
//                             {isEditable ? (
//                                 <Input
//                                     onChange={event => {
//                                         event.persist();
//                                         this.setState(preState => {
//                                             onChange({
//                                                 ...preState.value,
//                                                 name: event.target.value,
//                                             });
//                                             return {...preState, value: {...preState.value, name: event.target.value}};
//                                         });
//                                     }}
//                                     defaultValue={this.state.value.name}
//                                     placeholder='请设置参数名'
//                                 />
//                             ) : (
//                                 <Paragraph style={{marginBottom: 0}} ellipsis>
//                                     {this.state.value.name || '--'}
//                                 </Paragraph>
//                             )}
//                         </Tooltip>
//                     </Form.Item>
//                 </Col>
//                 <Col lg={isEditable ? 5 : 6} xxl={5}>
//                     <Form.Item
//                         style={{marginBottom: 0}}
//                         label='参数含义'
//                         labelCol={{xxl: {span: 6}, lg: {span: 8}}}
//                         wrapperCol={{xxl: {span: 18}, lg: {span: 16}}}
//                     >
//                         <Tooltip
//                             placement='topLeft'
//                             title={this.state.value.mean ? this.state.value.mean : '请设置参数含义'}
//                         >
//                             {isEditable ? (
//                                 <Input
//                                     defaultValue={this.state.value.mean}
//                                     onChange={event => {
//                                         event.persist();
//                                         const inputValue = event.target.value;
//                                         this.setState(preState => {
//                                             onChange({
//                                                 ...preState.value,
//                                                 mean: inputValue,
//                                             });
//                                             return {...preState, value: {...preState.value, mean: inputValue}};
//                                         });
//                                     }}
//                                     placeholder='请设置参数含义'
//                                 />
//                             ) : (
//                                 <Paragraph style={{marginBottom: 0}} ellipsis>
//                                     {values.mean || '--'}
//                                 </Paragraph>
//                             )}
//                         </Tooltip>
//                     </Form.Item>
//                 </Col>
//                 <Col lg={isEditable ? 4 : 3} xxl={isEditable ? 4 : 4} style={{padding: 0}}>
//                     <Form.Item
//                         style={{marginBottom: 0}}
//                         label='字段类型'
//                         labelCol={{xxl: {span: 12}, lg: {span: 12}}}
//                         wrapperCol={{xxl: {span: 12}, lg: {span: 12}}}
//                     >
//                         {isEditable ? (
//                             <Select
//                                 defaultValue={this.state.value.type}
//                                 onChange={(value: any) => {
//                                     this.setState(preState => {
//                                         onChange({
//                                             ...preState.value,
//                                             type: value,
//                                         });
//                                         return {...preState, value: {...preState.value, type: value}};
//                                     });
//                                 }}
//                             >
//                                 {this.state.value.child && this.state.value.child.length > 0
//                                     ? structOtions.map(element => {
//                                           return (
//                                               <Option key={element.key} value={element.value}>
//                                                   {element.label}
//                                               </Option>
//                                           );
//                                       })
//                                     : allOptions.map(element => {
//                                           return (
//                                               <Option key={element.key} value={element.value}>
//                                                   {element.label}
//                                               </Option>
//                                           );
//                                       })}
//                             </Select>
//                         ) : (
//                             <span>{values.type}</span>
//                         )}
//                     </Form.Item>
//                 </Col>
//                 {this.state.value.type !== 'struct' ? (
//                     <Col lg={4} xxl={5}>
// <Form.Item
//     style={{marginBottom: 0}}
//     label={requestType === 'request' ? '输入字段' : '输出字段'}
//     labelCol={{xxl: {span: 6}, lg: {span: 9}}}
//     wrapperCol={{xxl: {span: 18}, lg: {span: 15}}}
// >
//     <Tooltip
//         trigger='focus'
//         title={this.state.value.in ? this.state.value.in : '请设置输入字段'}
//     >
//         <Input
//             allowClear
//             value={this.state.value.in}
//             onChange={event => {
//                 event.persist();
//                 const inputValue = event.target.value;
//                 this.setState(preState => {
//                     onChange({
//                         ...preState.value,
//                         in: inputValue,
//                     });
//                     return {...preState, value: {...preState.value, in: inputValue}};
//                 });
//             }}
//         />
//     </Tooltip>
// </Form.Item>
//                     </Col>
//                 ) : null}

//                 {mode === 'config' ? (
//                     <Col lg={3} xxl={2}>
//                         <Form.Item style={{marginBottom: 0}}>
//                             <Switch
//                                 checked={this.state.value.required}
//                                 checkedChildren={`必    选`}
//                                 unCheckedChildren='非必选'
//                                 onChange={required => {
//                                     this.setState(preState => {
//                                         onChange({
//                                             ...preState.value,
//                                             required,
//                                         });
//                                         return {...preState, value: {...preState.value, required}};
//                                     });
//                                 }}
//                             />
//                         </Form.Item>
//                     </Col>
//                 ) : null}
//                 {this.state.value.type === 'string' && mode === 'query' ? (
// <Upload
//     accept='image/*'
//     beforeUpload={(file, fileList) => {
//         const reader = new FileReader();
//         reader.readAsDataURL(file);
//         reader.onload = () => {
//             if (reader.result && typeof reader.result === 'string') {
//                 const inValue = reader.result.split(',')[1];
//                 this.setState(preState => {
//                     onChange({
//                         ...preState.value,
//                         in: inValue,
//                     });
//                     return {
//                         ...preState,
//                         value: {...preState.value, in: inValue},
//                     };
//                 });
//             }
//         };
//         return false;
//     }}
//     showUploadList={false}
// >
//     <Button>
//         <Icon type='upload' /> 选择图片
//     </Button>
// </Upload>
//                 ) : null}
//                 {isEditable ? (
// <Col xxl={2} lg={2}>
//     <Popconfirm
//         title='是否确认删除?'
//         onConfirm={() => {
//             if (onDelete) {
//                 onDelete(values.id);
//             }
//         }}
//         okText='是'
//         cancelText='否'
//     >
//         <Button type='danger' shape='circle' icon='delete' size='small' style={{marginRight: 10}} />
//     </Popconfirm>
//     {this.state.value.type.indexOf('list') !== -1 || this.state.value.type === 'struct' ? (
//         <Button
//             size='small'
//             onClick={() => {
//                 if (onAdd) {
//                     onAdd(values.id);
//                 }
//             }}
//             type='primary'
//             shape='circle'
//             icon='plus'
//         />
//     ) : null}
// </Col>
//                 ) : null}
//             </Row>
//         );
//     }
// }

export default Parameter;
