import React, { createContext } from 'react';

import useProduct from '../hooks/useProduct';
import { ProductContextProps, Product, 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, increaseBy, maxCount, isMaxCountReached, reset } = useProduct( { onChange, product, value, initialValues } );

    return (
        <ProductContext.Provider value={ {
            counter,
            increaseBy,
            product,
            maxCount
        } }>
            <div
                className={ `${ styles.productCard } ${ className }` }
                style={ style }
            >

                {
                    children( {
                        count: counter,
                        maxCount: initialValues?.maxCount,
                        isMaxCountReached,
                        reset,
                        product,
                        increaseBy
                    } )
                }

            </div>
        </ProductContext.Provider>
    );
};