import React, { useEffect, useState } from 'react'
import PropTypes from 'prop-types';
import sy from './product-item.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 } from '@fortawesome/free-solid-svg-icons';
import Label from '../Label';
import AmountProduct from '../AmountProduct';
import { mockTheme } from '../../defaultTheme';


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

const StyledImg = styled.img(({ twProps }) => [
  twProps,
])

const StyledButton = styled.button(({ twProps }) => [
  twProps,
])

const StylesProductItem = {
  background: ({ bg }) => [
    {
      backgroundColor: bg,
    }
  ],
  border: ({ border }) => [
    {
      outline: `2px solid ${border}`,
    }
  ],
}




const ProductItem = (props) => {
  const {
    theme,
    data,
    imageChildren,
    marginBottom,
    isActiveProduct,
    isProductOneSKU,

    handleAddToCart,


    isCanIncrement,
    isCanDecrement,
    handleBtnIncrement,
    handleBtnDecrement,
    inputValue,
  } = props



  const [isActiveCard, setIsActiveCard] = useState(false)

  useEffect(() => {
    if (isProductOneSKU) {
      setIsActiveCard(true)
    } else {
      setIsActiveCard(isActiveProduct)
    }
  }, [isActiveProduct])


  let name = data?.name
  let image = data?.image
  let sold = data?.solds
  let remains = data?.remains
  let priceList = data?.priceList
  let priceNet = data?.priceNet


  const adjustColor = (color, amount) => {
    return '#' + color.replace(/^#/, '').replace(/../g, color => ('0' + Math.min(255, Math.max(0, parseInt(color, 16) + amount)).toString(16)).substr(-2));
  }
  const CBorder = adjustColor(theme.primary, 50)

  if (!data) {
    return null
  }

  return (
    <div
      className={classNames(css`
        position: relative;
        margin-bottom: ${marginBottom}px;
        `,
        sy.boxProductItem,
      )}
      role={isProductOneSKU ? "none" : "button"}
      onClick={(event) => {
        isProductOneSKU ? event.stopPropagation() : setIsActiveCard(!isActiveCard)
      }}
    >
      <StyledDiv
        twProps={tw`w-full relative z-[20]`}
      >
        <StyledDiv
          twProps={[
            tw` flex flex-col bg-white overflow-hidden shadow-lg rounded-card `,
            StylesProductItem.border({ border: (isActiveCard && !isProductOneSKU) && CBorder }),
          ]}
        >

          <div
            className={css`
              aspect-radio: 1/1;
              overflow: hidden;
            `}
          >
            {imageChildren ?
              imageChildren
              :
              <StyledImg
                twProps={tw`object-cover bg-gray text-transparent `}
                src={image}
                alt={`cover-${name}`}
                width={'100%'}
                height={'300px'}
              />
            }
          </div>
          <StyledDiv
            twProps={tw`flex flex-col items-start p-3 pb-0 line-clamp-2`}
          >
            <StyledDiv
              twProps={tw`w-full line-clamp-2 text-left`}
            >
              <Label
                text={name}
                fontSize={16}
                fontWeight={300}
                textAlign={'start'}
              />
            </StyledDiv>

            <StyledDiv
              twProps={[
                tw`flex`,
                isProductOneSKU ? tw`flex-row justify-between items-center` : tw`flex-col`,
              ]}
            >
              <StyledDiv
                twProps={tw`flex flex-col flex-1`}
              >
                <StyledDiv twProps={tw`flex flex-row justify-start`}>
                  <Label
                    text={`฿ ${priceList}`}
                    twColor={tw`text-textDisable`}
                    fontSize={12}
                    fontWeight={400}
                    textAlign={'start'}
                    textDecoration={'line-through'}
                  />
                </StyledDiv>
                <StyledDiv twProps={tw`flex flex-row justify-start`}>
                  <Label
                    text={`฿ ${priceNet}`}
                    color={theme.primary}
                    twProps={tw`mt-[4px]`}
                    fontSize={18}
                    fontWeight={700}
                    textAlign={'start'}
                  />
                </StyledDiv>
              </StyledDiv>
              {
                isProductOneSKU && (
                  <StyledDiv
                    twProps={tw`flex flex-col flex-1 items-end`}
                  >
                    <AmountProduct
                      theme={theme}
                      isCanIncrement={isCanIncrement}
                      isCanDecrement={isCanDecrement}
                      handleBtnIncrement={({ quantityProduct }) => { handleBtnIncrement({ quantityProduct }) }}
                      handleBtnDecrement={({ quantityProduct }) => { handleBtnDecrement({ quantityProduct }) }}
                      inputValue={inputValue}
                    />
                  </StyledDiv>
                )
              }

            </StyledDiv>
          </StyledDiv>

          {/* box add to cart */}
          <StyledDiv
            twProps={isActiveCard ? tw`flex flex-col p-4` : tw`flex flex-col pt-[50px]`}
          >
            <StyledDiv
              twProps={tw`flex flex-col justify-center text-center`}
            >
              {
                isActiveCard && !isProductOneSKU && (
                  <AmountProduct
                    theme={theme}
                    isCanIncrement={isCanIncrement}
                    isCanDecrement={isCanDecrement}
                    handleBtnIncrement={({ quantityProduct }) => { handleBtnIncrement({ quantityProduct }) }}
                    handleBtnDecrement={({ quantityProduct }) => { handleBtnDecrement({ quantityProduct }) }}
                    inputValue={inputValue}
                  />
                )
              }
              {/* <StyledDiv tw='pt-4'>
                <StyledDiv
                  twProps={tw`pt-4`}
                >
                  <Label
                    text={`ขายแล้ว ${sold} ชิ้น`}
                    twColor={tw`text-iconDisable`}
                    fontSize={12}
                    fontWeight={400}
                  />
                </StyledDiv>
              </StyledDiv> */}
            </StyledDiv>
          </StyledDiv>
          {
            (isActiveCard || isProductOneSKU) && (
              <StyledButton
                twProps=
                {[
                  css`
                    cursor: pointer;
                    &:hover, :hover {
                      Label{
                        cursor: pointer;
                      }
                  }
                  `,
                  tw`flex flex-row justify-center items-center text-center py-2 border-0 cursor-pointer`,
                  StylesProductItem.background({ bg: theme.primary }),
                ]}
                onClick={(event) => { handleAddToCart(), event.stopPropagation(); }}
              >
                <FontAwesomeIcon
                  icon={faCartShopping}
                  color={'#ffffff'}
                />
                <Label
                  text={`เพิ่มลงตะกร้า`}
                  color={'#ffffff'}
                  fontSize={16}
                  fontWeight={500}
                  twProps={tw`ml-2 cursor-pointer`}
                />
              </StyledButton>
            )
          }
          {/* box add to cart */}
        </StyledDiv>
      </StyledDiv>

    </div >
  )
}

ProductItem.propTypes = {
  theme: PropTypes.any,
  data: PropTypes.any,
  imageChildren: PropTypes.any,
  marginBottom: PropTypes.number,

  isActiveProduct: PropTypes.any,
  isProductOneSKU: PropTypes.any,

  handleAddToCart: PropTypes.any,

  //amount product
  isCanIncrement: PropTypes.any,
  isCanDecrement: PropTypes.any,
  handleBtnIncrement: PropTypes.any,
  handleBtnDecrement: PropTypes.any,

  inputValue: PropTypes.number,
  //amount product
};

ProductItem.defaultProps = {
  theme: mockTheme,
  data: null,
  imageChildren: null,
  marginBottom: 0,

  isActiveProduct: false,
  isProductOneSKU: false,

  handleAddToCart: null,

  //amount product
  isCanIncrement: true,
  isCanDecrement: true,
  handleBtnIncrement: null,
  handleBtnDecrement: null,

  inputValue: 0,
  //amount product
};


export default ProductItem