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(check, 'check_mass');
        setCheck({...check, [button]: check[button as number] === 'none_img' ? 'yellow_img' : 'none_img'});
        if (check[button]==='none_img') {
            console.log(check[button], 'check[button] true');
            setSum(sum-ing[button as number].price);
        } else {
            console.log(check[button], 'check[button] false');
            setSum(sum+ing[button 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="box_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>
            <div className="box_body">
                <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_img' ? 'yellow_img' : 'none_img'))} >
                                <div className={classNames('img_img ' + obj.name)}> </div>
                                <p className='title_img'>{obj.title}</p>
                                <p className='price_img'>{obj.price} p</p>
                                <div className={'button_img'}>{check[count] === 'none_img' ? <HiMinus/> : <HiPlus/>} </div>
                            </div>
                        </li> )}
                    </ul>
                </div>
            </div>
            <div className='box_footer'>
                <button className={classNames('button yellow button_size_48 button_border_radius_30')}
                    onClick={addBasket}>В корзину за {sum} р</button>
            </div>
        </div>
        <Link href={"/"} as={"/"} scroll={false}>
            <i className="close" onClick={addBasket}>
                <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>
    </>
  );
};