import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addItem, minusItem, removeItem } from './redux/slice';
import { CartItem as CartItemType } from './redux/types';

import Image from 'next/image';

type Props = {  id: string,
                src: string,
                alt: string,
                title_name: string,
                title_size: string,
                sum: number,
                count: number
            };

export const CardBasketProduct: React.FC<Props> = ({id, src, alt, title_name, title_size, sum, count}) => {
    const [countProduct, setcountProduct] = useState(1);
    const [price, setPrice] = useState(sum);

    const dispatch = useDispatch();

    const onClickPlus = () => {
        dispatch(
          addItem({
            id,
          } as CartItemType),
        );
      };

      const onClickMinus = () => {
        dispatch(
            minusItem(id));
      };

      const onClickRemove = () => {
        if (window.confirm('Ты действительно хочешь удалить товар?')) {
          dispatch(removeItem(id));
        }
      };

    return(
        <div className={'card_basket_product_main'}>
            <div className="product_head">
                <div className = {'product_img_box'}>
                    <Image
                        className = {'pictureText_img'}
                        src={src}
                        alt={alt}
                        width={63}
                        height={60}
                    />
                </div>
                <div className={'title_box'}>
                    <p className={'title'}>{title_name}</p>
                    <p className={'size'}>{title_size}</p>
                </div>
            </div>

            <div className={'product_footer'}>
                <div className={'sale_button_box'}>
                    <button className='product_button' onClick={onClickMinus} disabled={count === 1}>-</button>
                    <p className='product_count'>{count}</p>
                    <button className='product_button' onClick={onClickPlus}>+</button>
                </div>

                <div className={'sale_box_price'}>
                    <p className='product_price'>{price*count} ₽</p>
                </div>
            </div>
        </div>
    )
}