import React, { useState, useEffect } from 'react';
import { useSelector } from 'react-redux'
import { Modal } from '../../../../../UI';
import { useAppDispatch } from '../../../../../../redux/store';
import { fetchPizzaToCard, selectPizzaToCartData } from '../../../../../../redux/pizzaToCart/';
import { PizzaModalsContent } from './';

type Props = {
  id: number;
};

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

  const { pizzaToCard_items, pizzaToCard_status } = useSelector(selectPizzaToCartData);

  const [rows, setRows] = useState([]);

  console.log(pizzaToCard_items);
  const pizza = pizzaToCard_items.map((obj, index) => <PizzaModalsContent img_thin={''} name={''} price={0} size={''} feature={''} key={index} {...obj}/> );
  //const pizzaSkeleton = [...new Array(6)].map((_, index) => <PizzaSkeleton key={index} />);

  return (
    <Modal styles={'modal_product'} position={'position_product'}>
      {pizza}
    </Modal>
  );
};