const Cart = lazy(() => import('@pages/cart/Cart'));

import {
  cart,
  cartTitle as cart__title,
  cartRow as cart__row,
  cartLoader as cart__loader,
} from '@styles/pages/cart/cart.module.scss';
import { PageTitle } from '@components/uiKit/PageTitle';
import {
  CartStateContext,
  Goods,
  Checkout,
  CartState,
  OrderRegistered,
  EmptyCartMessage,
} from '@pages/cart';
import { useAppSelector } from '@hooks/useAppSelector';
import { selectCartIds } from '@redux/cart/cart.selectors';
import { useState } from 'react';
import { clearWholeCart } from '@redux/cart/cart.actions';
import { useDispatch } from 'react-redux';
import {
  notifyInfo,
  notifySuccessfully,
} from '@redux/notifications/notifications.actions';
import { Id } from '@interfaces/other/Id';
import { LoaderGlassWindow } from '@components/uiKit/loaders/LoaderGlassWindow';
import { checkoutSliceActions } from '@redux/checkout/checkout.slice';

const Cart = () => {
  const cardIds = useAppSelector(selectCartIds);
  const isCartEmpty = cardIds.length === 0;

  const [areGoodsVisible, setAreGoodsVisible] = useState(!isCartEmpty);
  const [isOrderMade, setIsOrderMade] = useState(false);

  const dispatch = useDispatch();

  const [idOfCreatedOrder, setIdOfCreatedOrder] = useState<Id>('');

  const [isRequestingOrder, setIsRequestingOrder] = useState(false);

  let cartState = CartState.empty;

  if (isCartEmpty && areGoodsVisible) {
    setAreGoodsVisible(false);
  }

  if (areGoodsVisible) {
    cartState = CartState.goodsVisible;
  }

  if (isOrderMade) {
    cartState = CartState.orderMade;
  }

  if (!areGoodsVisible && !isOrderMade) {
    cartState = CartState.empty;
  }

  const onClearCart = (cbBefore?: () => void, cbAfter?: () => void) => {
    setAreGoodsVisible(false);
    cbBefore?.();
    setTimeout(() => {
      dispatch(clearWholeCart());
      cbAfter?.();
    }, 505);
  };

  const goodsOnClearCart = () =>
    onClearCart(undefined, () => {
      dispatch(notifyInfo('Cart was successfully cleared.', 3500));
    });

  const checkoutOnClearCart = () => {
    onClearCart(
      () => {
        setIsOrderMade(true);
      },
      () => {
        dispatch(notifySuccessfully('Order successfully registered.', 3500));
        dispatch(checkoutSliceActions.reset());
      }
    );
  };

  return (
    <CartStateContext.Provider value={cartState}>
      <div className={cart}>
        <PageTitle customClassName={cart__title}>Cart</PageTitle>
        <EmptyCartMessage />
        <div className={cart__row}>
          <Goods cardIds={cardIds} onClearCart={goodsOnClearCart} />
          <Checkout
            onClearCart={checkoutOnClearCart}
            setIdOfCreatedOrder={setIdOfCreatedOrder}
            setIsRequestingOrder={setIsRequestingOrder}
          />
        </div>
        <OrderRegistered idOfCreatedOrder={idOfCreatedOrder} />
        <LoaderGlassWindow
          isVisible={isRequestingOrder}
          loaderCustomClassName={cart__loader}
        />
      </div>
    </CartStateContext.Provider>
  );
};

export { Cart };
export default Cart;