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

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

import {ButtonSmall as Button, Label, InputText, InputCheckbox} from '../../component/Form';

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

import {SaveSingle} from '../../component/ContentStore';
import FormUnique from "../../component/FormUnique";
import ProductDetailLocaleData from './ProductDetailLocaleData';

const styling = theme => ({
    wrapper: {
        margin: theme.gutter.base * 10 + 'px 0 ' + theme.gutter.base * 15 + 'px '
    },
    groups: {
        display: 'flex',
        flexWrap: 'wrap',
        margin: '0 -3px',
        '& > .schema-edit--group': {
            width: '100%',
            padding: '0 3px',
            marginBottom: '3px',
        },
    },
    inpGroup: {
        margin: theme.gutter.base * 2 + 'px 0 ' + theme.gutter.base * 6 + 'px '
    },
    wrapperTop: {
        display: 'grid',
        flexWrap: 'wrap',
        columnGap: theme.gutter.base * 2 + 'px',
        [StyleGrid.smUp]: {
            gridTemplateColumns: '1fr 3fr',
        }
    },
    boolControl: {
        display: 'flex',
        flexWrap: 'wrap',
        [StyleGrid.smUp]: {
            flexWrap: 'no-wrap',
            marginLeft: 'auto'
        }
    },
    inpGroupCheckBox: {
        display: 'flex',
        margin: theme.gutter.base * 2 + 'px ' + theme.gutter.base * 2 + 'px 0 0',
        '&:last-child': {
            marginRight: 0,
        }
    },
    product_no: {},
    pricing: {
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        columnGap: theme.gutter.base * 2 + 'px',
        [StyleGrid.smUp]: {
            gridTemplateColumns: '1fr 1fr 2fr',
        }
    }
});

const initialState = {
    productData: false,
};

class ProductDetailLocaleBaseData extends React.Component {

    state = initialState;

    constructor(props) {
        super(props);

        this.id = FormUnique();
        this.saveEvt = new SaveSingle();
    }

    setProductData() {
        const {productData} = this.props;
        if(!productData.data) {
            productData.data = {};
        }

        this.setState({
            productData: productData
        });
    }

    componentDidMount() {
        this.setProductData();
    }

    componentDidUpdate(prevProps) {
        if(prevProps.productData !== this.props.productData) {
            this.setProductData();
        }
    }

    onChangeUpdateProductData = (evt) => {
        let value = evt.target.value;
        if('checkbox' === evt.target.type) {
            value = evt.target.checked;
        }
        this.updateProductData(evt.target.name, value);
    };

    updateProductData = (name, value) => {
        //if(this.state.productData && this.state.productData.hasOwnProperty(name)) {
        if(this.state.productData) {
            const productData = {...this.state.productData};
            productData[name] = value;
            this.setState({productData});
        }
    };

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

    trigger = () => {
        if(!this.props.saveFn) {
            console.error('ProductData: can not save, no prop `saveFn` binding exits.');
            return;
        }
        let productData = {...this.state.productData};
        const data_field = this.saveEvt.trigger();
        if(data_field) {
            productData.data = {...data_field};
        }
        this.props.saveFn(productData);
    };

    render() {
        const {
            t, classes, theme,
            saving, schema, cacheid
        } = this.props;
        const {productData: data} = this.state;
        const {addSave, rmSave} = this.saveEvt;

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

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

                {data ?
                    <React.Fragment>
                        <div className={classes.wrapperTop}>
                            <div className={classes.inpGroup + ' ' + classes.product_no}>
                                <Label htmlFor={this.id + '-product_no'}>{t('editbasedata.product_no')}</Label>
                                <InputText id={this.id + '-product_no'} name={'product_no'} value={data.product_no || ''} onChange={this.onChangeUpdateProductData}/>
                            </div>

                            <div className={classes.boolControl}>
                                <div className={classes.inpGroup + ' ' + classes.inpGroupCheckBox}>
                                    <Label htmlFor={this.id + '-active'} style={{padding: '0 ' + theme.gutter.base + 'px 0 0'}}>{t('editbasedata.active')}</Label>
                                    <InputCheckbox id={this.id + '-active'} name={'active'} checked={!!+data.active} onChange={this.onChangeUpdateProductData} size={'1.25em'}/>
                                </div>
                                <div className={classes.inpGroup + ' ' + classes.inpGroupCheckBox}>
                                    <Label htmlFor={this.id + '-hidden'} style={{padding: '0 ' + theme.gutter.base + 'px 0 0'}}>{t('editbasedata.hidden')}</Label>
                                    <InputCheckbox id={this.id + '-hidden'} name={'hidden'} checked={!!+data.hidden} onChange={this.onChangeUpdateProductData} size={'1.25em'}/>
                                </div>
                                <div className={classes.inpGroup + ' ' + classes.inpGroupCheckBox}>
                                    <Label htmlFor={this.id + '-buy_able'} style={{padding: '0 ' + theme.gutter.base + 'px 0 0'}}>{t('editbasedata.buy_able')}</Label>
                                    <InputCheckbox id={this.id + '-buy_able'} name={'buy_able'} checked={!!+data.buy_able} onChange={this.onChangeUpdateProductData} size={'1.25em'}/>
                                </div>
                            </div>
                        </div>

                        <div className={classes.pricing}>
                            <div className={classes.inpGroup}>
                                <Label htmlFor={this.id + '-tax_group'}>{t('editbasedata.tax_group')}</Label>
                                <InputText id={this.id + '-tax_group'} name={'tax_group'} value={data.tax_group || ''} onChange={this.onChangeUpdateProductData}/>
                            </div>
                            <div className={classes.inpGroup}>
                                <Label htmlFor={this.id + '-price'}>{t('editbasedata.price')}</Label>
                                <InputText id={this.id + '-price'} name={'price'} value={data.price || ''} onChange={this.onChangeUpdateProductData}/>
                            </div>
                        </div>

                        <ProductDetailLocaleData data={data.data}
                                                 schema={schema}
                                                 addSave={addSave}
                                                 rmSave={rmSave}
                                                 saving={saving}
                                                 cacheid={cacheid}
                        />

                        <Button onClick={this.trigger}>{t('btn-save-data')}</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> : null}
            </div>
        )
    };
}

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