import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from "next/link";
import classNames from 'classnames';
import { useSelector } from 'react-redux';
import { HiMinus, HiPlus } from "react-icons/hi";
import { CardBasketProduct, CardAdditionally } from './'
import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
import {ButtonImg, Button } from '../../../../../UI';

type PizzaProps = {
  id: number;
  title: string;
  heft: string[];
  description: string;
  img: string[];
  price: string[];
  size: string[];
};

const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;

export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
  id,
  title,
  img,
  heft,
  description,
  price,
  size,
}) => {
    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
    const totalCount =0;
    const [basket, setBasket] = useState([]);
    const [quantityGoods, setQuantityGoods] = useState(basket.length);
    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);

    const [delivery, setDelivery] = useState(0);

    const [sum, setSum] = useState<number>(0);

    const addBasket = () => {
        console.log('add');
    }



  return (
    <>
        <Link href={"/"} as={"/"} scroll={false}>
            <button className={classNames('button_close')} onClick={addBasket}>X</button>
        </Link>
        <div className='header'>
            <p>{totalCount} товар(а)</p>
        </div>
        <div className='body'>
            <div className='body_order'>
                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
                    <CardBasketProduct
                        key={count}
                        src={'/smal_pizza.png'}
                        alt={'pizza'}
                        title_name={rows.name}
                        title_size={rows.size}
                        sum={rows.sum}/>
                    ): ' Корзина пуста'}
            </div>
            <div className='body_additionally'>
                <p className='body_additionally_text'>Добавить к заказу?</p>
                    <BoxScroll>
                        {additionally.map((name, count) =>
                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
                        }
                    </BoxScroll>
            </div>
        </div>
        <div className='basket_footer'>
            <div className='promo_code_box'>
                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
                <button className='button' type="submit">Применить</button>
            </div>
            <div className='check'>
                <div className='check_box'>
                    <p >Доставка </p> <p className='check_text'>{delivery} ₽</p>
                </div>
                <div className='check_box'>
                    <p >{quantityGoods} товар(а) </p>
                    <p className='check_text'>{sum} ₽</p>
                </div>
            </div>
            <Button styles={'yellow button_size_48'}
                    align={'button_align_center'}
                    onClick={() => console.log('add')}>Оформить заказ {sum} ₽
            </Button>
        </div>
    </>
  );
};


