import React, { createContext } from 'react';
import { useProduct } from '../hooks/useProduct';
import { Product, ProductContextProps, onChangeArgs, InitialValues, ProductCardHandlers } from '../interfaces/interfaces';
import styles from '../styles/styles.module.css';

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

export interface Props {
   product: Product;
   children: ( args: ProductCardHandlers ) => 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, maxCount, isMaxCountReached, increaseBy, reset } 
      = useProduct({ onChange, product, value, initialValues });
   
   return (
      <ProductContext.Provider value={{ counter, product, maxCount, increaseBy }}>
         <div className={`${styles.productCard} ${className}`} style={style}> 
            { 
               children({
                  count: counter,
                  isMaxCountReached,
                  maxCount: initialValues?.maxCount,
                  product,
                  increaseBy,
                  reset
               }) 
            }
         </div>
      </ProductContext.Provider>
   );
};