import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux'
import Image from 'next/image';
import Link from "next/link";
import classNames from 'classnames';
import { Modal, Button } from '../../../../../UI';
import { useAppDispatch } from '../../../../../../redux/store';
import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';

type Props = {
  id: string | string[];
};

const title='dddd',
feature='feature',
description='description',
sum=33, types=[0,1], sizes=[30,40, 50];

const typeNames = ['традиционное тесто','тонкое тесто'];

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

export const PizzaCard: React.FC<Props> = ({id}) => {
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch( fetchPizzaToCard({id}) );
  }, [dispatch, id]);

  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);
  const [activeType, setActiveType] = useState(0);
  const [activeSize, setActiveSize] = useState(0);
  const [rows, setRows] = useState([]);

  console.log(pizzaToCard_items);
  //const pizza = pizzaToCard_items.map((obj, index) => <PizzaBlock key={index} {...obj}/> );
  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);

  return (
    <Modal styles={'modal_product'} position={'position_product'}>
      <div className='modal_body_left'>
        <div className='modal_img'>
          <Image
            src={'/assets/img/'+id+'.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}>В корзину за {sum} р</Button>
            <Link href={"/"} as={"/"} scroll={false}>
              <button className={classNames('yelow button_size_32')}>Закрыть </button>
            </Link>
          </div>
        </div>
      </div>
    </Modal>
  );
};