import { useContext, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Badge, ButtCon } from '@biom3/react';
import { ButtonNavigationStyles } from '../../../components/Header/HeaderStyles';
import { BridgeWidgetViews } from '../../../context/view-context/BridgeViewContextTypes';
import { ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
import { RocketHero } from '../../../components/Hero/RocketHero';
import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
import { sendBridgeTransactionSentEvent, sendBridgeWidgetCloseEvent } from '../BridgeWidgetEvents';
import { FooterLogo } from '../../../components/Footer/FooterLogo';
import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
import { BridgeContext } from '../context/BridgeContext';

export interface MoveInProgressProps {
  transactionHash: string;
  isTransfer: boolean;
}

export function MoveInProgress({ transactionHash, isTransfer }: MoveInProgressProps) {
  const { t } = useTranslation();
  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
  const { viewDispatch } = useContext(ViewContext);
  const {
    bridgeState: {
      checkout,
    },
  } = useContext(BridgeContext);

  useEffect(() => {
    sendBridgeTransactionSentEvent(
      eventTarget,
      transactionHash,
    );
  }, []);

  return (
    <SimpleLayout
      testId="move-in-progress-view"
      header={(
        <HeaderNavigation
          transparent
          onCloseButtonClick={() => sendBridgeWidgetCloseEvent(eventTarget)}
          rightActions={(
            <>
              <ButtCon
                icon="Minting"
                sx={ButtonNavigationStyles()}
                onClick={() => {
                  viewDispatch({
                    payload: {
                      type: ViewActions.UPDATE_VIEW,
                      view: { type: BridgeWidgetViews.TRANSACTIONS },
                    },
                  });
                }}
                testId="settings-button"
              />
              {!isTransfer
                && (
                  <Badge
                    isAnimated
                    variant="guidance"
                    sx={{
                      position: 'absolute',
                      right: 'base.spacing.x14',
                      top: 'base.spacing.x1',
                    }}
                  />
                )}
            </>
          )}
        />
      )}
      footer={(
        <FooterLogo />
      )}
      heroContent={<RocketHero environment={checkout.config.environment} />}
      floatHeader
    >
      <SimpleTextBody heading={t(isTransfer ? 'views.IN_PROGRESS.transferHeading' : 'views.IN_PROGRESS.heading')}>
        {!isTransfer && (
          <>
            {t('views.IN_PROGRESS.body1')}
            <br />
            <br />
          </>
        )}
        {t('views.IN_PROGRESS.body2')}
      </SimpleTextBody>
    </SimpleLayout>
  );
}