import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from "next/link";
import { Button } from '../../../../../UI';
import { Ingredients } from './';
import { Box } from '../../../../../../components/customer/containers';
import classNames from 'classnames';

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 PizzaModalsContent: React.FC<PizzaProps> = ({
  id,
  title,
  img,
  heft,
  description,
  price,
  size,
}) => {
    const [activeType, setActiveType] = useState(0);
    const [activeSize, setActiveSize] = useState(1);
    const [feature, setFeature] = useState(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
    const addBasket = () => {
        console.log('add');
    }

    const ing = [{name:'onion', title:'Лук', price:6},
    {name:'tomato', title:'Томаты', price:16},
    {name:'cheese', title:'Сыр', price:20},
    {name:'mushroom', title:'Грибы', price:10},
    {name:'bacon', title:'Бекон', price:30},
    {name:'pineapple', title:'Ананас', price:30},
    {name:'pickles', title:'Огурчик', price:6},
    {name:'jalapeno', title:'Халапенью', price:6}];

    useEffect(() => {
        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г')
      }, [activeSize, activeType, heft]);
      const ingredients = ing.map((obj, index) => <Ingredients id={index} check={'none'} onClick={function (): void {
          throw new Error('Function not implemented.');
      } } key={index} {...obj} />);
  return (
    <>
        <div className='modal_body_left'>
            <div className='modal_img'>
                <Image
                    src={'/assets/img/'+img[activeSize]+'.jpg'}
                    alt={'pizza'}
                    width={400}
                    height={400}
                />
            </div>
        </div>
        <div className='modal_body_right'>
            <div className="modal_header">
                <h3 className="modal_title">{title}</h3>
                <p className="modal_feature">{feature}</p>
                <p className="modal_description">{description}</p>
                <div className="pizza-block__selector">
                    <ul>
                    {types.map((typeId) => (
                        <li
                            key={typeId}
                            onClick={() => setActiveType(typeId)}
                            className={activeType === typeId ? classNames('active type') : classNames('type')}>
                            {typeNames[typeId]}
                        </li>
                    ))}
                    </ul>
                    <ul>
                    {sizes.map((size, i) => (
                        <li
                            key={size}
                            onClick={() => setActiveSize(i)}
                            className={activeSize === i ? classNames('active size') : classNames('size')}>
                            {size} см
                        </li>
                    ))}
                    </ul>
                </div>
                <div className="container">
                    <section >
                        <ul className={'vendor-list__ul'}>
                            {ingredients}
                        </ul>
                    </section>
                </div>
                <div className='modal_footer'>
                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
                    <Link href={"/"} as={"/"} scroll={false}>
                        <Button styles={classNames('yelow button_size_32')} align={'button_align_right'} onClick={addBasket}>Закрыть </Button>
                    </Link>
                </div>
            </div>
        </div>
        </>
  );
};


