import React, { Component } from 'react';
import '../../css/Components/selected.css';
import { Icon} from '@iconify/react';
import minusIcon from '@iconify/icons-fa-solid/minus';
import plusIcon from '@iconify/icons-fa-solid/plus';
import { Tooltip, Zoom } from '@material-ui/core';

class Selected extends Component {

    constructor(props){
        super(props)
        this.state = {

        }
    }

    render() {
        return (
            <div id="selectedBox">
                {this.props.counter ?  
                <>          
                    <p id="selectedTxt">Vous avez sélectionné {this.props.counter} articles</p>
                    <div id = "selectedActions">
                        <Tooltip title="Enlever" TransitionComponent={Zoom} aria-label="Enlever">
                            <div>
                            <Icon onClick={this.minusQuantitySelected} icon={minusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />        
                            </div>
                        </Tooltip>
                        <Tooltip title="Ajouter" TransitionComponent={Zoom} aria-label="Ajouter">
                            <div>
                            <Icon onClick={this.plusQuantitySelected} icon={plusIcon} style={{color: '#ffffff', fontSize: '2vw',cursor:'pointer', margin: '0 1vw 0 1vw'}} />
                            </div>
                        </Tooltip>
                        <Tooltip title="Supprimer" TransitionComponent={Zoom} aria-label="Supprimer">
                            <div>
                            <Icon icon={plusIcon} style={{transform : 'rotate(-45deg)', color: '#ffffff', fontSize: '2vw',cursor:'pointer',margin:'0 1vw 0 1vw'}} />
                            </div>
                        </Tooltip>
                    </div>
                </>
                : null}
            </div>
        );
    }
}

export default Selected;