import React, { useState } from 'react';
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 } from '../../../../../../components/customer/containers';
import { Button } from '../../../../../UI';
import { selectCart } from './redux/selectors';


type PizzaProps = {
  id: string;
  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 [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 { totalPrice, items } = useSelector(selectCart);

    const totalCount = items.reduce((sum: number, item: any) => sum + item.count, 0);

    const [ sum, setSum ] = useState<number>(totalPrice + delivery);



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

    const sizeText = [{size:30, text: 'маленькая 30 см, '},{size:40, text: 'средняя 40 см, '}, {size:50, text: 'большая 50 см, '}]


  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} товар на {totalPrice} р</p>
        </div>
        <div className='body'>
            <div className='body_order'>
                {Object.keys(items).length > 0 ? items.map((rows, count) =>
                    <CardBasketProduct
                        id={rows.id}
                        count={rows.count}
                        key={count}
                        src={'/assets/img/'+rows.img[1]+'.jpg'}
                        alt={'pizza'}
                        title_name={rows.title}
                        title_size={sizeText.find(el => el.size === rows.size)?.text +' '+ rows.type}
                        sum={rows.sum}/>
                    ) : <p className='body_additionally_text'>Корзина пуста</p>}
            </div>
            {Object.keys(items).length > 0 ?
            <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 >{totalCount} товар(а) </p>
                    <p className='text'>{totalPrice} ₽</p>
                </div>
                <div className='box'>
                    <p><b>Итого</b> </p> <p className='text'>{totalPrice + 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')} >Оформить заказ {totalPrice + delivery} ₽
                </Button>
            </Link>
        </div>
    </>
  );
};