import React from 'react';
import {MdFileUpload, MdList, MdAutorenew, MdDone, MdError,} from 'react-icons/md';

import TimeAgo from '../../component/TimeAgo';

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

const theming = theme => ({
    wrapper: {
        position: 'relative'
    },
    state: {
        position: 'absolute',
        top: 0,
        right: 0,
        fontFamily: theme.monospace,
        fontSize: '0.875rem',
        margin: '0 ' + theme.gutter.base + 'px',
    },
    detailsWrapper: {
        position: 'absolute',
        zIndex: 3,
        top: '100%',
        right: '50%',
        padding: theme.gutter.base + 'px ' + theme.gutter.base * 2 + 'px',
        transform: 'translateX(50%)'
    },
    detailItem: {
        display: 'flex',
        minWidth: '250px',
        '& > *:not(:last-child)': {
            marginRight: theme.gutter.base * 2 + 'px'
        }
    },
    detailItemInner: {
        margin: '0',
        '&:not(:last-child)': {
            marginRight: theme.gutter.base * 2 + 'px'
        }
    },
    stats: {
        display: 'flex',
        minWidth: '150px'
    },
    statsItem: {
        display: 'flex',
        alignItems: 'center',
        fontFamily: theme.monospace,
        fontSize: '0.875rem',
        margin: '0 ' + theme.gutter.base + 'px',
        '& svg': {
            marginRight: theme.gutter.base + 'px',
        }
    }
});

class PushState extends React.Component {

    state = {
        qty: {},
        pushing: {},
        open: false,
    };

    componentDidMount() {
        Pusher.provideStateConsumer((qty, pusher) => {
            this.setState({
                qty: qty,
                pushing: pusher
            })
        });
    }

    componentWillUnmount() {
        Pusher.unbindStateConsumer();
    }

    render() {
        const {theme, classes, className} = this.props;

        return <div className={classes.wrapper}>
            <button className={className} style={{color: theme.textColor}} onClick={() => {
                this.setState({open: !this.state.open})
            }}>
                <MdFileUpload color={theme.textColor} size={'1.5em'}/>
                <p className={classes.state}>{this.state.qty.doing ? this.state.qty.doing : null}</p>
            </button>
            {this.state.open ?
                <div className={classes.detailsWrapper} style={{background: theme.bgPage, border: '1px solid ' + theme.textColorLight}}>
                    {Object.keys(this.state.pushing).slice(0).reverse().map((id) => (
                        <div key={id} data-key={id} className={classes.detailItem}>
                            <p className={classes.detailItemInner}><TimeAgo time={this.state.pushing[id].time}/></p>
                            <p className={classes.detailItemInner}>{this.state.pushing[id].name}</p>
                            {'init' === this.state.pushing[id].state ? <p className={classes.detailItemInner}><MdList color={theme.textColor} size={'1em'}/></p> : null}
                            {'begin' === this.state.pushing[id].state ? <p className={classes.detailItemInner}><MdAutorenew color={theme.textColor} size={'1em'}/></p> : null}
                            {'success' === this.state.pushing[id].state ? <p className={classes.detailItemInner}><MdDone color={theme.textColor} size={'1em'}/></p> : null}
                            {'error' === this.state.pushing[id].state ? <p className={classes.detailItemInner}><MdError color={theme.textColor} size={'1em'}/></p> : null}
                        </div>
                    ))}
                    <div className={classes.stats}>
                        <p className={classes.statsItem} style={{marginLeft: 'auto'}}><MdList color={theme.textColor} size={'1em'}/> {this.state.qty.all ? this.state.qty.all : 0}</p>
                        <p className={classes.statsItem}><MdAutorenew color={theme.textColor} size={'1em'}/> {this.state.qty.doing ? this.state.qty.doing : 0}</p>
                        <p className={classes.statsItem}><MdDone color={theme.textColor} size={'1em'}/> {this.state.qty.success ? this.state.qty.success : 0}</p>
                        <p className={classes.statsItem} style={{marginRight: 'auto'}}><MdError color={theme.textColor} size={'1em'}/> {this.state.qty.failed ? this.state.qty.failed : 0}</p>
                    </div>
                </div> : null}
        </div>;
    }
}

export default withPusher(withTheme(injectSheet(theming)(PushState)));