pizza.krasnikov.pro/components/customer/pages/index/modals/pizza/content.tsx

import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from "next/link";
import classNames from 'classnames';
import { HiMinus, HiPlus } from "react-icons/hi";

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 [sum, setSum] = useState<number>(price[activeSize] as unknown as number);
    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}];

    const [check, setCheck] = useState<Array<string>>([]);

    const ingredientsAdd = (event: React.MouseEvent<HTMLLIElement>) => {
        event.preventDefault();
        const button = event.currentTarget.value as any;
        console.log(button);
        setCheck({...check, [button]: check[button as unknown as number] === 'none_ing' ? 'yellow_ing' : 'none_ing'});
        if (check[button as unknown as number]==='none') {
            setSum(sum-ing[button as unknown as number].price);
        } else {
            setSum(sum+ing[button as unknown as number].price);
        }
    }

    useEffect(() => {
        setFeature(sizes[activeSize]+' см, '+ typeNames[activeType] +" "+ heft[activeSize]+' г');
        setCheck([]);
        setSum(price[activeSize] as unknown as number);
      }, [activeSize, activeType, heft, price]);

  return (
    <>
        <div className='left'>
            <div className='img'>
                <Image
                    src={'/assets/img/'+img[activeSize]+'.jpg'}
                    alt={'pizza'}
                    width={400}
                    height={400}
                />
            </div>
        </div>
        <div className='right'>
            <div className="header">
                <h3 className="title">{title}</h3>
                <p className="feature">{feature}</p>
                <p className="description">{description}</p>
                <div className="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='ingredients'>
                    <ul className='ul'> {ing.map((obj, count) =>
                        <li className='li' key={count} value={count} onClick={ingredientsAdd}>
                            <div className={classNames('text_box ' + (check[count] === 'none_ing' ? 'yellow_ing' : 'none_ing'))} >
                                <div className={classNames('img_ing ' + obj.name)}> </div>
                                <p className='title_ing'>{obj.title}</p>
                                <p className='price_ing'>{obj.price} p</p>
                                <div className={'button_ing'}>{check[count] === 'none_ing' ? <HiMinus/> : <HiPlus/>} </div>
                            </div>
                        </li> )}
                    </ul>
                </div>
                <div className='modal_footer'>
                    <button className={classNames('button yellow button_size_48 button_border_radius_30')}
                        onClick={addBasket}>В корзину за {sum} р</button>
                    <Link href={"/"} as={"/"} scroll={false}>
                        <button className={classNames('button yelow button_size_h_48 button_border_radius_8')} onClick={addBasket}>Закрыть </button>
                    </Link>
                </div>
            </div>
        </div>
        </>
  );
};