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

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

import {withTheme, injectSheet} from '../../lib/theme';
import {ButtonSmall} from "../../component/Form";
import ButtonInteractiveDelete from "../../component/ButtonInteractiveDelete";
import StyleGrid from "../../lib/StyleGrid";

const theming = theme => ({
    wrapperLocaleActive: {
        display: 'flex',
        flexWrap: 'wrap',
        margin: theme.gutter.base * 2 + 'px 0',
        [StyleGrid.smUp]: {
            flexWrap: 'no-wrap',
        }
    },
    localeDeleteBtn: {
        display: 'flex',
        alignItems: 'center',
        marginLeft: 'auto',
        '& svg': {
            marginLeft: theme.gutter.base + 'px'
        }
    },
    subTitle: {},
    dateWrapper: {
        display: 'flex',
        width: '100%',
        flexWrap: 'wrap',
        margin: '6px 0'
    },
    dateSingle: {
        [StyleGrid.smx]: {
            width: '100%'
        },
        '&:last-child': {
            [StyleGrid.smUp]: {
                marginLeft: '12px'
            }
        }
    },
    dateLbl: {
        marginRight: '6px',
        fontSize: '0.875rem'
    },
    dateValue: {
        fontSize: '0.875rem'
    }
});

class ProductDetailHead extends React.Component {


    pushNewLocale = () => {
        const {pushNewLocale} = this.props;
        if(pushNewLocale) {
            pushNewLocale();
        } else {
            console.error('pushNewLocale not assigned to ProductDetailHead.');
        }
    };

    render() {
        const {
            classes, data, t, theme,
            activeLocaleExists, activeLocalePossible, localeActive, pushDeleteLocale, savingDelete, savingNew
        } = this.props;

        return (
            <React.Fragment>
                {activeLocaleExists ?
                    // when locale exists, show info and delete button
                    <div className={classes.wrapperLocaleActive}>
                        <p style={{margin: 0, fontSize: '0.875rem'}}> {t('locale.active-is')} {'*' === localeActive ? t('locale.universal-locale') : localeActive}</p>
                        <ButtonInteractiveDelete
                            className={classes.localeDeleteBtn}
                            comp={(p) => (
                                <button {...p} style={{fontSize: '0.875rem', color: theme.textColor}}>{t('locale.delete')} {p.children}</button>
                            )}
                            onClick={pushDeleteLocale}
                        />
                        {savingDelete ?
                            ('progress' === savingDelete || 'error' === savingDelete ?
                                <React.Fragment>
                                    <Loading style={{
                                        wrapper: {margin: 0},
                                        item: ('error' === savingDelete ? {borderColor: theme.errorColor} : {}),
                                    }}/>

                                </React.Fragment> :
                                ('success' === savingDelete ?
                                    <MdDone/>
                                    : null))
                            : null}
                    </div> :
                    activeLocalePossible ?
                        // when locale not exists but possible, show info and create form
                        (<React.Fragment>
                            <p>{t('locale.active-not-existing')} <em><strong>{'*' === localeActive ? t('locale.universal-locale') : localeActive}</strong></em></p>
                            <div>
                                <ButtonSmall onClick={this.pushNewLocale}
                                             style={{marginTop: theme.gutter.base * 8 + 'px'}}
                                >{t('locale.new-locale.btn-create')}</ButtonSmall>

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

                                        </React.Fragment> :
                                        ('success' === savingNew ?
                                            <MdDone/>
                                            : null))
                                    : null}
                            </div>
                        </React.Fragment>)
                        :
                        // when locale not exists and not possible, show info
                        <p>{t('locale.active-not-valid')} <i>{'*' === localeActive ? t('locale.universal-locale') : localeActive}</i></p>}
                {data && (data.date_create || data.date_update) ?
                    <div className={classes.dateWrapper}>
                        {data.date_create ?
                            <div className={classes.dateSingle}>
                                <span className={classes.dateLbl}>{t('date.created')}</span>
                                <span className={classes.dateValue}>{data.date_create}</span>
                            </div>
                            : null}
                        {data.date_update ?
                            <div className={classes.dateSingle}>
                                <span className={classes.dateLbl}>{t('date.updated')}</span>
                                <span className={classes.dateValue}>{data.date_update}</span>
                            </div>
                            : null}
                    </div>
                    : null}
            </React.Fragment>
        )
    };
}

export default withTheme(injectSheet(theming)(ProductDetailHead));