import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from "next/link";
import {ButtonImg, Button } from '../../../../../UI';
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');
    }

  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='modal_footer'>
                    <Button styles={'yellow button_size_48'} align={'button_align_center'}
                        onClick={addBasket}>В корзину за {price[activeSize]} р</Button>
                    <Link href={"/"} as={"/"} scroll={false}>
                        <button className={classNames('yelow button_size_32')}>Закрыть </button>
                    </Link>
                </div>
            </div>
        </div>
        </>
  );
};


