import React from 'react';
import { Input, Button } from 'antd';
import IconFont from '../../extra/iconFont';
import styles from './styles.less';
import { LinkProps, LinkState } from '../editInterface';

class Link extends React.Component<LinkProps, LinkState> {
    static getDerivedStateFromProps(nextProps: LinkProps, prevState: LinkState) {
        const { prevProps } = prevState;
        let nextState: LinkState = {
            ...prevState,
            prevProps: nextProps,
        };
        if (JSON.stringify(prevProps.value) !== JSON.stringify(nextProps.value)) {
            nextState.value = nextProps.value;
        }
        return nextState;
    }
    constructor(props: LinkProps) {
        super(props);
        const { value } = props;
        this.state = {
            prevProps: props,
            value,
        };
    }

    addLink = () => {
        const { value } = this.state;
        const newValue = (value && value.slice()) || [];
        newValue.push({});
        this.setState({
            value: newValue,
        });
    };

    changeLinkValue = (index, e) => {
        const { value } = this.state;
        const temp = value[index];
        temp.value = e.target.value;
        this.setState(
            {
                value,
            },
            this.changeLink,
        );
    };

    changeLinkText = (index, e) => {
        const { value } = this.state;
        const temp = value[index];
        temp.text = e.target.value;
        this.setState(
            {
                value,
            },
            this.changeLink,
        );
    };

    changeLink = () => {
        const { onChange } = this.props;
        const { value } = this.state;
        if (typeof onChange === 'function') {
            onChange(value);
        }
    };

    render() {
        const { value } = this.state;
        return (
            <div className={styles.container}>
                {value &&
                    value.map((link, i) => {
                        return (
                            <div key={i}>
                                <div>
                                    <span>链接地址：</span>
                                    <Input
                                        className={styles.input}
                                        value={link.value}
                                        onChange={this.changeLinkValue.bind(this, i)}
                                    />
                                </div>
                                <div>
                                    <span>显示文字：</span>
                                    <Input
                                        className={styles.input}
                                        value={link.text}
                                        onChange={this.changeLinkText.bind(this, i)}
                                    />
                                </div>
                            </div>
                        );
                    })}
                <Button type="primary" className={styles.btn} onClick={this.addLink}>
                    <IconFont className={styles.icon} type="iconxinzeng" />
                    <span className={styles.text}>新增</span>
                </Button>
            </div>
        );
    }
}
export default Link;