import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import { toggleCart } from '../../store/actions';
// import { selectCartItemsCount } from '../Selectors/cart.selectors';

import ShoppingIcon from '../../assets/ShoppingIcon.svg';

const IconWrapper = styled.div`
    width: 45px;
    height: 45px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
`

const Icon = styled.img`
    width: 30px;
    height: 30px;
    @media (max-width: 768px) {
        margin-top: 0.5rem;        
        width: 40px;
        height: 40px;
    }
`

const ItemCount = styled.span`
    position: absolute;
    font-size: 15px;
    font-weight: bold;
    bottom: 12px;
`


const CartIcon = ({ toggleCart, itemCount }) => {

    return (
        <IconWrapper onClick={toggleCart}>
            <Icon src={ShoppingIcon}/>
            <ItemCount>{itemCount}</ItemCount>
        </IconWrapper>
    )
}

const mapDispatchToProps = dispatch => ({
    toggleCart: () => dispatch(toggleCart())
});

const mapStateToProps = createStructuredSelector({
    //itemCount: selectCartItemsCount
})

export default connect(mapStateToProps, mapDispatchToProps)(CartIcon);