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([  {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]);
    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={"/"}>
            <i className={classNames('button_close')}>
                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
                </svg>
            </i>
        </Link>
        <div className='header'>
            <p>{totalCount} товар на {sum} р</p>
        </div>
        <div className='body'>
            <div className='body_order'>
                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
                    <CardBasketProduct
                        key={count}
                        src={'/assets/img/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="Промокод"/>
            </div>
            <div className='check'>
                <div className='box'>
                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
                </div>
                <div className='box'>
                    <p >{quantityGoods} товар(а) </p>
                    <p className='text'>{sum} ₽</p>
                </div>
                <div className='box'>
                    <p><b>Итого</b> </p> <p className='text'>{delivery} ₽</p>
                </div>
            </div>
            <Link href={"/"} as={"/"}>
                <Button styles={'yellow button_size_48 button_border_radius_30'}
                        align={'button_align_center'}
                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
                </Button>
            </Link>
        </div>
    </>
  );
};