import { createContext, useContext, useState } from 'react';
import { getSStorage, setSStorage } from '../utils/helpers/storage';

const CheckoutContext = createContext({
  checkoutStorage: {},
});
const CheckoutDispatchContext = createContext({
  addCheckoutValue: (products, userInfo, userID) => {},
  clearCheckout: () => {},
});

export const useCheckoutData = () => {
  return useContext(CheckoutContext);
};
export const useCheckoutDataUpdate = () => {
  return useContext(CheckoutDispatchContext);
};

const useCheckout = () => {
  const CHECKOUT_KEY = 'checkout-data';
  const [checkoutStorage, setCheckoutStorage] = useState(
    getSStorage(CHECKOUT_KEY)
  );

  const addCheckoutValue = (products, userInfo, userID) => {
    console.log('hello from context');
    const items = getSStorage(CHECKOUT_KEY);

    setSStorage(CHECKOUT_KEY, { products, userInfo, userID });

    setCheckoutStorage(items);
  };

  const clearCheckout = () => {
    setSStorage(CHECKOUT_KEY, {});
    setCheckoutStorage({});
  };

  return {
    addCheckoutValue,
    clearCheckout,
    setCheckoutStorage,
    checkoutStorage,
  };
};

const CheckoutProvider = ({ children }) => {
  const {
    checkoutStorage,
    setCheckoutStorage,
    addCheckoutValue,
    clearCheckout,
  } = useCheckout();

  return (
    <CheckoutContext.Provider value={{ checkoutStorage }}>
      <CheckoutDispatchContext.Provider
        value={{
          setCheckoutStorage,
          addCheckoutValue,
          clearCheckout,
        }}
      >
        {children}
      </CheckoutDispatchContext.Provider>
    </CheckoutContext.Provider>
  );
};

export default CheckoutProvider;