import React, {Fragment} from 'react';
import {Card, Form, Input, Select} from 'antd';
import {withPropsAPI} from 'gg-editor';
import upperFirst from 'lodash/upperFirst';

const {Item} = Form;
const {Option} = Select;

const inlineFormItemLayout = {
    labelCol: {
        sm: {span: 8},
    },
    wrapperCol: {
        sm: {span: 16},
    },
};

class DetailForm extends React.Component {
    get item() {
        const {propsAPI} = this.props;

        return propsAPI.getSelected()[0];
    }

    handleSubmit = e => {
        if (e && e.preventDefault) {
            e.preventDefault();
        }

        const {form, propsAPI} = this.props;
        const {getSelected, executeCommand, update} = propsAPI;

        setTimeout(() => {
            form.validateFieldsAndScroll((err, values) => {
                if (err) {
                    return;
                }

                const item = getSelected()[0];

                if (!item) {
                    return;
                }

                executeCommand(() => {
                    update(item, {
                        ...values,
                    });
                });
            });
        }, 0);
    };

    renderEdgeShapeSelect = () => {
        return (
            <Select onChange={this.handleSubmit}>
                <Option value="flow-smooth">Smooth</Option>
                <Option value="flow-polyline">Polyline</Option>
                <Option value="flow-polyline-round">Polyline Round</Option>
            </Select>
        );
    };

    renderNodeDetail = () => {
        const {form} = this.props;
        const {label} = this.item.getModel();

        return (
            <Item label="Label" {...inlineFormItemLayout}>
                {form.getFieldDecorator('label', {
                    initialValue: label,
                })(<Input onBlur={this.handleSubmit}/>)}
            </Item>
        );
    };

    renderEdgeDetail = () => {
        const {form} = this.props;
        const {label = '', shape = 'flow-smooth'} = this.item.getModel();

        return (
            <Fragment>
                <Item label="Label" {...inlineFormItemLayout}>
                    {form.getFieldDecorator('label', {
                        initialValue: label,
                    })(<Input onBlur={this.handleSubmit}/>)}
                </Item>
                <Item label="Shape" {...inlineFormItemLayout}>
                    {form.getFieldDecorator('shape', {
                        initialValue: shape,
                    })(this.renderEdgeShapeSelect())}
                </Item>
            </Fragment>
        );
    };

    renderGroupDetail = () => {
        const {form} = this.props;
        const {label = '新建分组'} = this.item.getModel();

        return (
            <Item label="Label" {...inlineFormItemLayout}>
                {form.getFieldDecorator('label', {
                    initialValue: label,
                })(<Input onBlur={this.handleSubmit}/>)}
            </Item>
        );
    };

    render() {
        const {type} = this.props;

        if (!this.item) {
            return null;
        }

        return (
            <Card type="inner" size="small" title={upperFirst(type)} bordered={false}>
                <Form onSubmit={this.handleSubmit}>
                    {type === 'node' && this.renderNodeDetail()}
                    {type === 'edge' && this.renderEdgeDetail()}
                    {type === 'group' && this.renderGroupDetail()}
                </Form>
            </Card>
        );
    }
}

export default Form.create()(withPropsAPI(DetailForm));
