import React from 'react';
import posed from 'react-pose';
import {MdDone} from 'react-icons/md';

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

import {ButtonSmall as Button} from '../../component/Form';
import SchemaEditor from "../../component/Schema/EditorLoader";

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

import {SaveSingle} from '../../component/ContentStore';

import {storeSchema} from "./Stores/Schema";

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

        '& .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 Wrapper = posed.div({
    hidden: {
        height: 0,
        marginTop: 0,
    },
    visible: {
        height: 'auto',
        marginTop: '24px',
    }
});

class ArticleDetailMeta extends React.PureComponent {

    constructor(props) {
        super(props);

        this.saveEvt = new SaveSingle();
    }


    fetch(schema, force = false) {
        const {loadSchema} = this.props;
        loadSchema(schema, force);
    }

    trigger = () => {
        if(!this.props.saveFn) {
            console.error('ArticleMeta: can not save, no prop `saveFn` binding exits.');
            return;
        }

        this.props.saveFn(this.saveEvt.trigger());
    };

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

    componentDidMount() {
        if(this.props.meta._schema) {
            this.fetch(this.props.meta._schema);
        }
    }

    render() {
        const {
            t, classes, theme,
            open, cacheid, saving,
            isSchemaLoaded, schemas
        } = this.props;

        const {addSave, rmSave} = this.saveEvt;


        const schema = this.props.meta._schema || false;

        return (
            <Wrapper className={classes.wrapper} withParent={false} pose={(open ? 'visible' : 'hidden')}>

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

                {('progress' === isSchemaLoaded(schema) || 'error' === isSchemaLoaded(schema) ?
                    <Loading
                        style={{
                            wrapper: {margin: 0},
                        }}
                        errorWarning={'error' === isSchemaLoaded(schema)}
                    /> :
                    null)}

                {this.props.meta && true === isSchemaLoaded(schema) ?
                    <React.Fragment>
                        <SchemaEditor data={this.props.meta}
                                      schema={schemas[schema]}
                                      tScope={'article-meta'}
                                      addSave={addSave}
                                      rmSave={rmSave}
                                      cacheid={cacheid}
                        />

                        <Button onClick={this.trigger}>{t('editmeta.save')}</Button>

                        {saving ?
                            ('progress' === saving || 'error' === saving ?
                                <React.Fragment>
                                    <Loading style={{
                                        wrapper: {margin: 0},
                                        item: ('error' === saving ? {borderColor: theme.errorColor} : {}),
                                    }}/>

                                </React.Fragment> :
                                ('success' === saving ?
                                    <MdDone/> : null))
                            : null}
                    </React.Fragment> :
                    (!this.props.meta._schema || (false !== isSchemaLoaded(schema) && 'progress' !== isSchemaLoaded(schema))) ? <p>{t('view-error.no-editable-meta')}</p> : null
                }
            </Wrapper>
        )
    };
}

export default withTheme(injectSheet(styling)(storeSchema(ArticleDetailMeta)));