import React, { createContext } from 'react';
import { useProduct } from '../hooks/useProduct';

import { ProductCardProps, ProductContextProps } from '../interfaces';

import styles from '../styles/styles.module.css';

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

export const ProductCard = ({ children, product, className, style, onChange, value, initialValues }: ProductCardProps) => {

  const { counter, maxCount, isMaxCountReached, handleIncreseBy, handleReset } = useProduct({ onChange, product, value, initialValues });

  return (
    <Provider value={{
      counter,
      maxCount,
      handleIncreseBy,
      product
    }}>
      <div className={`${styles.productCard} ${className}`} style={style}>
        {
          children && (typeof children === 'function')
            ? children({
              count: counter,
              maxCount,
              isMaxCountReached,
              product,
              handleIncreseBy,
              handleReset,
            })
            : children
        }
      </div>
    </Provider>
  )
}