import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import sy from './amount-product.module.scss'
import { css } from '@emotion/css'
import tw, { styled } from 'twin.macro'
import classNames from 'classnames';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCartShopping, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
import { mockTheme } from '../../defaultTheme';
import Label from '../Label';


const StyledDiv = styled.div(({ twProps }) => [
    twProps
])

const StyledButton = styled.div(({ twProps }) => [
    twProps
])
const StyledInput = styled.div(({ twProps }) => [
    twProps
])



const AmountProduct = (props) => {
    const {
        theme,
        marginBottom,

        isCanIncrement,
        isCanDecrement,

        handleBtnIncrement,
        handleBtnDecrement,

        inputValue,
    } = props


    const [quantityProduct, setQuantityProduct] = useState(1)
    useEffect(() => {
        setQuantityProduct(inputValue)
    }, [inputValue])

    const handleIncrement = (event, data, cartIndex) => {
        let total = quantityProduct + 1
        if (isCanIncrement && total >= 0) {
            setQuantityProduct(total)
            handleBtnIncrement({ quantityProduct: total })
        }
        event.stopPropagation();
    }

    const handleDecrement = (event, data, cartIndex) => {
        let total = quantityProduct - 1
        if (isCanDecrement && total >= 0) {
            setQuantityProduct(total)
            handleBtnDecrement({ quantityProduct: total })
        }
        event.stopPropagation();
    }

    return (
        <div
            className={classNames(css`
                position: relative;
                margin-bottom: ${marginBottom}px;
                `,
                sy.boxAmountProduct,
            )}
        >
            <StyledDiv twProps={tw`flex flex-row justify-between items-center`}>
                <StyledButton twProps={[
                    tw`
                w-1 h-1 flex flex-row justify-center items-center p-4 mr-2 
                border-0 bg-white rounded-circle shadow-lg relative z-[100] cursor-pointer
                `,
                    !isCanDecrement && (tw`cursor-default`),
                ]}
                    role={isCanDecrement ? 'button' : 'none'}
                    onClick={(event) => { handleDecrement(event) }}
                >
                    <FontAwesomeIcon
                        size={'sm'}
                        icon={faMinus}
                        color={isCanDecrement ? theme.primary : '#DBDBDB'}
                    />
                </StyledButton>

                <StyledInput twProps={[
                    tw`
                    appearance-none min-w-[5rem]
                    text-center w-full py-[0.35rem] px-0
                    overflow-hidden border-0 rounded-full
                    focus:(outline-none border-none) relative z-[100]
                    bg-[#F2F2F2] cursor-default
                    `,
                ]}
                    onClick={(event) => { event.stopPropagation(); }}
                >
                    <Label
                        text={quantityProduct || 0}
                        fontSize={14}
                        fontWeight={500}
                        textAlign={'center'}
                        // color={'#383633'}
                        twColor={tw`text-textPrimary`}
                    />
                </StyledInput>

                <StyledButton twProps={[
                    tw`
                    w-1 h-1 flex flex-row justify-center items-center p-4 ml-2
                    border-0 bg-white rounded-circle shadow-lg relative z-[100]  cursor-pointer
                    `,
                    !isCanIncrement && (tw`cursor-default`),
                ]}
                    role={isCanIncrement ? 'button' : 'none'}
                    onClick={(event) => { handleIncrement(event) }}
                >
                    <FontAwesomeIcon
                        size={'sm'}
                        icon={faPlus}
                        color={isCanIncrement ? theme.primary : '#DBDBDB'}
                    />
                </StyledButton>

            </StyledDiv>

        </div >
    )
}

AmountProduct.propTypes = {
    theme: PropTypes.any,
    marginBottom: PropTypes.number,

    isCanIncrement: PropTypes.any,
    isCanDecrement: PropTypes.any,
    handleBtnIncrement: PropTypes.any,
    handleBtnDecrement: PropTypes.any,

    inputValue: PropTypes.number,
};

AmountProduct.defaultProps = {
    theme: mockTheme,
    marginBottom: 0,

    isCanIncrement: true,
    isCanDecrement: true,
    handleBtnIncrement: null,
    handleBtnDecrement: null,

    inputValue: 0,
};


export default AmountProduct