import { Box } from '@biom3/react';
import {
  useContext,
  useEffect,
  useState,
} from 'react';
import { IMTBLWidgetEvents, ThemeOverrides, WidgetTheme } from '@imtbl/checkout-sdk';
import { useTranslation } from 'react-i18next';
import { Environment } from '@imtbl/config';
import { ConnectLoaderContext } from '../../../context/connect-loader-context/ConnectLoaderContext';
import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
import { QuickswapFooter } from '../../../components/Footer/QuickswapFooter';
import { sendSwapWidgetCloseEvent } from '../SwapWidgetEvents';
import { SwapForm } from '../components/SwapForm';
import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
import { hasZeroBalance } from '../../../lib/gasBalanceCheck';
import { SwapContext } from '../context/SwapContext';
import { NotEnoughImx } from '../../../components/NotEnoughImx/NotEnoughImx';
import { IMX_TOKEN_SYMBOL } from '../../../lib';
import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
import { isPassportProvider } from '../../../lib/provider';
import { LoadingView } from '../../../views/loading/LoadingView';
import { orchestrationEvents } from '../../../lib/orchestrationEvents';

export interface SwapCoinsProps {
  theme: WidgetTheme;
  themeOverrides: ThemeOverrides;
  cancelAutoProceed: () => void;
  fromAmount?: string;
  toAmount?: string;
  fromTokenAddress?: string;
  toTokenAddress?: string;
  showBackButton?: boolean;
  showHeader?: boolean;
  title: string;
  subTitle: string;
}

export function SwapCoins({
  theme,
  themeOverrides,
  cancelAutoProceed,
  fromAmount,
  toAmount,
  fromTokenAddress,
  toTokenAddress,
  showBackButton,
  showHeader,
  title,
  subTitle,
}: SwapCoinsProps) {
  const { t } = useTranslation();
  const { viewDispatch } = useContext(ViewContext);
  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);

  const {
    swapState: {
      tokenBalances,
      autoProceed,
    },
  } = useContext(SwapContext);

  const {
    connectLoaderState: {
      checkout,
      provider,
    },
  } = useContext(ConnectLoaderContext);

  const [showNotEnoughImxDrawer, setShowNotEnoughImxDrawer] = useState(false);
  useEffect(() => {
    if (hasZeroBalance(tokenBalances, IMX_TOKEN_SYMBOL) && !isPassportProvider(provider)) {
      setShowNotEnoughImxDrawer(true);
    }
  }, [tokenBalances]);

  return (
    <SimpleLayout
      header={!autoProceed && showHeader ? (
        <HeaderNavigation
          title={title}
          onCloseButtonClick={() => sendSwapWidgetCloseEvent(eventTarget)}
          showBack={showBackButton}
          onBackButtonClick={() => {
            orchestrationEvents.sendRequestGoBackEvent(
              eventTarget,
              IMTBLWidgetEvents.IMTBL_SWAP_WIDGET_EVENT,
              {},
            );
          }}
        />
      ) : undefined}
      footer={<QuickswapFooter environment={checkout?.config.environment} theme={theme} />}
    >
      <Box
        sx={{
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
        }}
      >
        <SwapForm
          cancelAutoProceed={cancelAutoProceed}
          data={{
            fromAmount,
            toAmount,
            fromTokenAddress,
            toTokenAddress,
          }}
          theme={theme}
          themeOverrides={themeOverrides}
          subTitle={subTitle}
        />
        <NotEnoughImx
          environment={checkout?.config.environment ?? Environment.PRODUCTION}
          visible={showNotEnoughImxDrawer}
          showAdjustAmount={false}
          hasZeroImx
          onAddCoinsClick={() => {
            viewDispatch({
              payload: {
                type: ViewActions.UPDATE_VIEW,
                view: {
                  type: SharedViews.TOP_UP_VIEW,
                },
              },
            });
          }}
          onCloseDrawer={() => {
            setShowNotEnoughImxDrawer(false);
          }}
        />
      </Box>
      {autoProceed && <LoadingView loadingText={t('views.SWAP.PREPARE_SWAP.loading.text')} />}
    </SimpleLayout>
  );
}