import { useProducts } from '../hooks';
import React, { ReactNode, createContext } from 'react';
import {
  InitialValues,
  Product,
  ProductCardHandlers,
  ProductContextProps,
  onChangeArgs,
} from '../interfaces';

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

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

type DivProps = React.ClassAttributes<HTMLDivElement> &
  React.HTMLAttributes<HTMLDivElement>;

export interface Props extends Omit<DivProps, 'children'> {
  product: Product;
  children: ((args: ProductCardHandlers) => ReactNode) | ReactNode;
  onChange?: (args: onChangeArgs | React.FormEvent<HTMLDivElement>) => void;
  value?: number;
  initialValues?: InitialValues;
  test?: string;
}

const ProductCard = ({
  children,
  product,
  className,
  value,
  onChange,
  initialValues,
  ...restProps
}: Props) => {
  const {
    reset,
    increaseBy,
    counter,
    maxCount,
    isMaxCountReached,
  } = useProducts({
    onChange,
    value,
    product,
    initialValues,
  });

  return (
    <Provider value={{ counter, increaseBy, product, maxCount }}>
      <div {...restProps} className={`${styles.productCard} + ${className}`}>
        {typeof children === 'function'
          ? children({
              count: counter,
              isMaxCountReached,
              maxCount,
              product,
              increaseBy,
              reset,
            })
          : children}
      </div>
    </Provider>
  );
};

export default ProductCard;