// Lib
import React, {Component} from 'react';
import {MdAdd} from 'react-icons/md';

import {injectSheet, withTheme} from "../../../lib/theme";

import StringListItem from "./StringListItem";
import ContentStore from "../../ContentStore";

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'column'
    },
    toggle: {
        margin: '0 auto'
    }
});

class StringList extends Component {

    state = {
        list: [],
    };

    data = {};

    constructor(props) {
        super(props);

        this.contentStore = new ContentStore();
        /**
         * @type {{createItem}}
         */
        this.contentList = this.contentStore.createList();
    }

    componentWillUnmount() {
        if(this.props.rmSave) {
            this.props.rmSave(this.props.name);
        }

        this.contentStore.clear();
    }

    componentDidUpdate(prevProps) {
        if(
            prevProps.data !== this.props.data
        ) {
            this.setState({list: []});
        }
    }

    componentDidMount() {
        if(this.props.addSave) {
            this.props.addSave(this.props.name, () => {
                return Object.values(this.contentStore.save());
            });
        }

        if(this.props.data) {
            let data = this.props.data;
            let list = [...this.state.list];
            for(let key in data) {
                if(data.hasOwnProperty(key)) {
                    list.push(this.renderItem(key, data[key]));
                }
            }
            this.setState({list: list});
        }
    }

    renderItem(key, val) {
        const {name} = this.props;
        /**
         * @type {{addSave, rmSave}}
         */
        const itemCreator = this.contentList.createItem(key);
        return <StringListItem key={key}
                               uid={key}
                               name={name}
                               val={val}
                               deleteItem={this.deleteItem.bind(this, key)}
                               {...itemCreator}
        />;
    }

    createItem() {
        let list = [...this.state.list];
        list.push(this.renderItem((list.length), ''));
        this.setState({list: list});
    }

    deleteItem(key) {
        let list = [...this.state.list];
        if(list.hasOwnProperty(key)) {
            this.contentList.deleteItem(key);
            // todo: refine and make a true deletion that will delete from the array but also it should rely on key's
            setTimeout(() => {
                list[key] = '';
                this.setState({list: list});
            }, 250);
        }
    }

    render() {
        const {classes, theme} = this.props;

        return (
            <div className={classes.wrapper}>
                {this.state.list}
                <button className={classes.toggle} onClick={this.createItem.bind(this)}><MdAdd size={'1em'} color={theme.textColor}/></button>
            </div>
        );
    };
}

export default withTheme(injectSheet(styling)(StringList));