// Lib
import React from 'react';
import {MdDragHandle, MdExpandMore} from 'react-icons/md';
import ButtonInteractiveDelete from '../ButtonInteractiveDelete';

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

const stylingBlockHead = theme => ({
    wrapper: {
        margin: 0,
        display: 'flex',
        alignItems: 'center'
    },
    icon: {
        minWidth: '30px',
    },
    lbl: {
        marginLeft: theme.gutter.base * 3 + 'px',
    },
    openToggle: {
        cursor: 'pointer',
        width: '30px',
        margin: '0 ' + theme.gutter.base * 3 + 'px',
        /*maxWidth: '50%',
        flexGrow: 2,
        textAlign: 'right',
        background: 'rgba(0, 0, 0, 0.1)'*/
    },
    openToggleIcon: {},
    positionHelper: {
        marginLeft: 'auto'
    },
    dragHandle: {
        marginLeft: '-6px',
        marginRight: theme.gutter.base * 2 + 'px',
    },
});


const styleOpen = {
    transform: 'rotate(180deg)',
    transition: '0.35s linear transform'
};

const styleClose = {
    transition: '0.35s linear transform'
};

const BlockDragItemHead = injectSheet(stylingBlockHead)((props) => {
    const {classes, icon, lbl, showToggle, deleteItem, onToggle, open, theme} = props;
    const Ic = icon;

    return (
        <div className={classes.wrapper}>
            <div className={classes.dragHandle}><MdDragHandle size={18} color={('dark' === props.theme.name ? props.theme.textColorLight : props.theme.textColor)}/></div>

            {icon ? <div className={classes.icon}><Ic/></div> : null}
            {lbl ? <div className={classes.lbl}>{lbl}</div> : null}

            {/* no elem is surely rendered, but one need to be rendered for CSS style where it is split into right and left, just for that is the positionHelper */}
            <div className={classes.positionHelper}/>

            {showToggle && onToggle ? (
                <button className={classes.openToggle} onClick={onToggle}>
                    <MdExpandMore size={24}
                                  color={theme.textColor}
                                  className={classes.openToggleIcon}
                                  style={open ? styleOpen : styleClose}
                    />
                </button>
            ) : null}

            {deleteItem ? <ButtonInteractiveDelete resetTimeout={0} onClick={() => deleteItem()}/> : null}
        </div>
    );
});

export default withTheme(BlockDragItemHead);