'use client';

import clsx from 'clsx';
import React, { useEffect, useState } from 'react';
import { PriceWrapper } from '@theme/views/product';
import { ProductPageProps } from './layout';
import MiscButtons from './misc-buttons';
import { pushProductViewed } from '@theme/utils/gtm';
import { useSession } from 'next-auth/react';
import { isVariantSelectionComplete } from '../../utils/variant-validation';
import { useProductCart } from '../../hooks/use-product-cart';
import { useStockAlert } from '../../hooks/use-stock-alert';
import { ProductVariants } from './product-variants';
import { ProductActions } from './product-actions';
import { ProductShare } from './product-share';
import PluginModule, { Component } from '@akinon/next/components/plugin-module';

export default function ProductInfo({ data }: ProductPageProps) {
  const { data: session } = useSession();
  const [isVariantLoading, setIsVariantLoading] = useState(false);

  const inStock = data.selected_variant !== null || data.product.in_stock;

  const {
    addProductToCart,
    productError: cartError,
    clearProductError: clearCartError,
    isAddToCartLoading
  } = useProductCart({
    product: data.product,
    variants: data.variants
  });

  const {
    addProductToStockAlertList,
    isModalOpen,
    stockAlertResponseMessage,
    productError: stockError,
    isAddToStockAlertLoading,
    closeModal,
    clearError: clearStockError
  } = useStockAlert({
    productPk: data.product.pk,
    userEmail: session?.user?.email
  });

  const productError = cartError || stockError;
  const clearProductError = () => {
    clearCartError();
    clearStockError();
  };

  useEffect(() => {
    isVariantSelectionComplete(data.variants) && setIsVariantLoading(false);
    !inStock && setIsVariantLoading(false);
  }, [data, inStock]);

  useEffect(() => {
    if (isVariantLoading) {
      clearProductError();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVariantLoading]);

  useEffect(() => {
    pushProductViewed(data?.product);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  const handleVariantChange = () => {
    clearProductError();
    setIsVariantLoading(true);
  };

  return (
    <>
      <div
        className={clsx(
          'fixed bottom-0 left-0 w-1/2 h-14 z-[20] bg-white mt-0 border-t border-gray-500 items-center justify-center',
          'sm:relative sm:flex sm:items-center sm:mt-5 sm:border-none'
        )}
      >
        <PriceWrapper
          price={data.product.price}
          retailPrice={data.product.retail_price}
        />
      </div>

      <ProductVariants
        variants={data.variants}
        onVariantChange={handleVariantChange}
      />

      <ProductActions
        product={data.product}
        variants={data.variants}
        inStock={inStock}
        isVariantLoading={isVariantLoading}
        onAddToCart={addProductToCart}
        onAddToStockAlert={addProductToStockAlertList}
        onClearError={clearProductError}
        isAddToCartLoading={isAddToCartLoading}
        isAddToStockAlertLoading={isAddToStockAlertLoading}
        productError={productError}
        isModalOpen={isModalOpen}
        stockAlertResponseMessage={stockAlertResponseMessage}
        onCloseModal={closeModal}
      />

      <PluginModule
        component={Component.VirtualTryOnPlugin}
        props={{
          product: data.product,
          className: 'hidden sm:flex'
        }}
      />

      <MiscButtons
        productName={data.product.name}
        productPk={data.product.pk}
        variants={data.variants}
      />

      <ProductShare productName={data.product.name} className="my-2 sm:mb-4" />
    </>
  );
}