import React, { createContext } from 'react';

import { useProduct } from '../hooks/useProduct';
import styles from '../styles/styles.module.css';
import { InitialValues, onChangeArgs, Product, ProductCardHandles, ProductContextProps } from '../interfaces/interfaces';


export const ProductContext = createContext({} as ProductContextProps);
const { Provider } = ProductContext;

export interface Props {
  product: Product;
  // children?: ReactElement | ReactElement[];
  children: ( args: ProductCardHandles ) => JSX.Element;
  className?: string;
  style?: React.CSSProperties; 
  onChange?: ( args: onChangeArgs ) => void;
  value?: number;
  initialValues?: InitialValues
}


export const ProductCard = ({ 
    children, 
    product, 
    className, 
    style, 
    onChange, 
    value,
    initialValues,
  }: Props) => {
    
    const { counter, increaseBy, maxCount, isMaxCountReached, reset } 
      = useProduct({ onChange, product, value, initialValues  });

  return (

    <Provider value= {{
        counter,
        maxCount, 
        increaseBy,
        product,
    }} >

        <div className={ `${styles.productCard} ${ className }` }
          style= { style }
        >

            { children({
              count: counter,
              isMaxCountReached,
              maxCount: initialValues?.maxCount,
              product,

              increaseBy,
              reset,
             }) 
            }

        </div>
    </Provider>
   
  )
}