// Lib
import React from 'react';
import Group from './Group';
import {injectSheet} from "../../lib/theme";
import ContentStore from '../ContentStore';
import StyleGrid from "../../lib/StyleGrid";

const styling = theme => ({
    wrapper: {
        display: 'flex',
        flexWrap: 'wrap',
        margin: theme.gutter.base * 4 + 'px -3px',
        '& .schema-edit--group': {
            margin: '0 0 ' + theme.gutter.base * 4 + 'px 0'
        },
        '& > .schema-edit--group': {
            width: '100%',
            position: 'relative',
            padding: '0 3px 3px 3px',
            flexGrow: 2,
            [StyleGrid.smUp]: {
                width: '50%',
            },
            [StyleGrid.mdUp]: {
                width: '33%',
            }
        },
        '& > .schema-edit--group:after': {
            content: '""',
            position: 'absolute',
            height: '1px',
            width: '25%',
            top: '100%',
            left: '50%',
            transform: 'translateX(-50%)',
            background: 'rgba(150, 150, 150, 0.2)',
        },
        '& .schema-edit--group.TextRich': {
            width: '100%',
        },
        '& .schema-edit--group.GenericList': {
            width: '100%',
        },
        '& > .schema-edit--group .schema-edit--lbl': {
            margin: '0 0 ' + theme.gutter.base + 'px 0'
        },
        '& .schema-edit--group-list': {},
        '&.as-block .schema-edit--group': {
            width: '100%'
        }
    }
});

class SchemaEditor extends React.Component {

    state = {
        list: null
    };

    constructor(props) {
        super(props);

        this.contentStore = new ContentStore();
    }

    createList() {
        const {data, schema, cacheid, t, tScope} = this.props;

        if(data && schema && schema.properties && cacheid) {
            // create the sub schema from all defined properties in this schema
            let schema_props = schema.properties;
            delete schema_props._schema;

            let List = [];
            for(let key in schema_props) {
                // create groups for all properties in current schema
                if(schema_props.hasOwnProperty(key)) {
                    List.push(<Group
                        key={key}
                        uid={key}
                        name={key}
                        data={data[key] || false}
                        schema={schema_props[key]}
                        t={t}
                        tScope={tScope || ''}
                        contentStore={this.contentStore}
                    />);
                }
            }

            this.setState({
                list: () => List
            });
        } else {
            if(!cacheid) {
                console.error('SchemaEditor: error, no cacheid specified, supply an unique identifier for the current applied data');
            }
        }
    }

    componentDidUpdate(prevProps) {
        if(
            prevProps.cacheid !== this.props.cacheid ||
            prevProps.data !== this.props.data ||
            prevProps.schema !== this.props.schema
        ) {
            this.setState({
                list: null
            });
            this.createList();
        }
    }

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

        this.contentStore.clear();
    }

    componentDidMount() {
        this.createList();

        if(this.props.addSave) {
            this.props.addSave(this.contentStore.save);
        }
    }

    render() {
        if(this.state.list) {
            return <div className={this.props.classes.wrapper + ' ' + (this.props.displayBlock ? 'as-block' : '')}>
                <this.state.list/>
            </div>;
        } else {
            return null
        }
    }
}

export default injectSheet(styling)(SchemaEditor);