import React from 'react';
import {withNamespaces} from 'react-i18next';

import Loading from "../../component/Loading";

import SchemaEditor from "../../component/Schema/EditorLoader";

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

import apiSchema from '../Content/ApiSchema';

const styling = theme => ({
    wrapper: {
        overflow: 'hidden',
    },
    groups: {
        display: 'flex',
        flexWrap: 'wrap',
        //margin: '0 -3px',
        /*'& > .schema-edit--group': {
            width: '100%',
            padding: '0 3px',
            marginBottom: '3px',
        },

        '& .schema-edit--group': {
            margin: '0 auto 3px auto'
        },
        '& > .schema-edit--group .schema-edit--lbl': {
            margin: '0 0 ' + theme.gutter.base + 'px 0'
        },
        '& .schema-edit--group-list': {}*/
    }
});

const initialState = {
    schema: false,
    loaded: false
};

class ProductDetailLocaleData extends React.PureComponent {

    state = initialState;


    componentWillUnmount() {
        this.setState(initialState);
    }

    //
    // Api Fetch and Push

    fetch(schema) {
        this.setState({loaded: 'progress'});
        apiSchema.onGet(schema, (state) => {
                this.setState({
                    loaded: state
                });
            },
            (data) => {
                if(data) {
                    this.setState({
                        schema: data,
                        loaded: true
                    });
                } else {
                    this.setState({
                        loaded: 'error'
                    });
                }
            }
        );
    }

    componentDidUpdate(prevProps) {
        if(prevProps.schema !== this.props.schema) {
            this.fetch(this.props.schema);
        }
    }

    componentDidMount() {
        if(this.props.schema) {
            this.fetch(this.props.schema);
        }
    }

    render() {
        const {t, classes, cacheid, addSave, rmSave, data} = this.props;

        return (
            <div className={classes.wrapper}>

                <h3 style={{width: '100%'}}>{t('editdata.title')}</h3>

                {('progress' === this.state.loaded || 'error' === this.state.loaded ?
                    <Loading
                        style={{
                            wrapper: {margin: 0},
                        }}
                        errorWarning={'error' === this.state.loaded}
                    /> :
                    null)}

                {this.state.schema ?
                    <React.Fragment>
                        <SchemaEditor data={data || {}}
                                      schema={this.state.schema}
                                      addSave={addSave}
                                      rmSave={rmSave}
                                      cacheid={cacheid}
                                      displayBlock={true}
                                      tScope={'product.' + this.props.schema}
                        />
                    </React.Fragment> :
                    (!this.props.schema ? <p>{t('view-error.schema-not-set')}</p> :
                        ((false !== this.state.loaded && 'progress' !== this.state.loaded) ? <p>{t('view-error.schema-not-loaded')}</p> : null))
                }
            </div>
        )
    };
}

export default withNamespaces('page--shop-product')(withTheme(injectSheet(styling)(ProductDetailLocaleData)));