'use client';

import React, { useEffect, useState } from 'react';
import {
  useGetBasketQuery,
  useGetAllBasketsQuery,
  useLazyGetBasketDetailQuery,
  useRemoveBasketMutation,
  useSelectMainBasketMutation
} from '@akinon/next/data/client/basket';
import { Button, Icon, Price } from '@akinon/next/components';
import { useLocalization } from '@akinon/next/hooks';
import clsx from 'clsx';

interface Props {
  BasketItem?: React.JSXElementConstructor<any>;
}

export const MultiBasket = (props: Props) => {
  const { t } = useLocalization();
  const { data: basketData } = useGetBasketQuery();
  const { data: allBaskets, isSuccess: isAllBasketsSuccess } =
    useGetAllBasketsQuery();
  const [getBasketDetail] = useLazyGetBasketDetailQuery();
  const { BasketItem } = props;
  const [removeBasket] = useRemoveBasketMutation();
  const [selectMainBasket] = useSelectMainBasketMutation();
  const [detailedBaskets, setDetailedBaskets] = useState<any[]>([]);

  useEffect(() => {
    const fetchAllBasketDetails = async () => {
      if (!allBaskets) return;

      if (allBaskets) {
        const basketDetails = [];

        for (const basket of allBaskets) {
          try {
            const detail = await getBasketDetail({
              namespace: basket.namespace
            }).unwrap();
            basketDetails.push(detail);
          } catch (error) {
            console.error('Error fetching basket details:', error);
          }
        }
        setDetailedBaskets(basketDetails);
      }
    };

    fetchAllBasketDetails();
  }, [allBaskets, getBasketDetail]);

  return (
    <>
      {detailedBaskets.length > 0 && (
        <>
          {detailedBaskets.map((basket) => (
            <div key={basket?.pk}>
              {basket?.basketitem_set?.length > 0 && (
                <div className="border mb-4">
                  <div
                    className={clsx(
                      'w-full flex items-center justify-end border-b font-medium py-2 px-4 text-sm',
                      {
                        'justify-between': basket.namespace
                      }
                    )}
                  >
                    {basket.namespace && <h1>{basket.namespace}</h1>}
                    <Button
                      onClick={() => removeBasket({ pk: basket.pk })}
                      appearance="ghost"
                      data-testid="basket-select-button"
                      className="text-primary-500 font-medium border-0 p-0 m-0 hover:bg-transparent hover:text-error"
                    >
                      {t('basket.remove_basket')}
                    </Button>
                  </div>
                  <ul className="px-4">
                    {basket.basketitem_set.map((basketItem, index) => (
                      <BasketItem
                        basketItem={basketItem}
                        key={index}
                        namespace={basket.namespace}
                      />
                    ))}
                  </ul>
                  <div className="flex justify-end items-center gap-2 p-4">
                    <div className="flex items-center gap-3">
                      <div className="">
                        <div className="text-xs text-right font-light text-gray-900">
                          {t('basket.total')}
                        </div>
                        <Price
                          value={basket.total_amount}
                          data-testid="basket-total"
                          className="text-sm font-medium"
                        />
                      </div>
                      <Button
                        onClick={() => selectMainBasket({ pk: basket.pk })}
                        data-testid="basket-select-button"
                      >
                        {basketData?.pk == basket?.pk ? (
                          <div className="flex items-center">
                            <Icon name="check" className="mr-2" />
                            <span>{t('basket.selected_basket')}</span>
                          </div>
                        ) : (
                          <span>{t('basket.select_basket')}</span>
                        )}
                      </Button>
                    </div>
                  </div>
                </div>
              )}
            </div>
          ))}
        </>
      )}
    </>
  );
};

export default MultiBasket;