import { Box } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { ActiveTransactions } from '../../components/ActiveTransactions/ActiveTransactions.js';
// import { AmountInput } from '../../components/AmountInput/AmountInput.js';
import { ContractComponent } from '../../components/ContractComponent/ContractComponent.js';
import { GasRefuelMessage } from '../../components/GasMessage/GasRefuelMessage.js';
import { PageContainer } from '../../components/PageContainer.js';
import { PoweredBy } from '../../components/PoweredBy/PoweredBy.js';
import { Routes } from '../../components/Routes/Routes.js';
// import { SelectChainAndToken } from '../../components/SelectChainAndToken.js';
import { SendToWalletButton } from '../../components/SendToWallet/SendToWalletButton.js';
import { SendToWalletExpandButton } from '../../components/SendToWallet/SendToWalletExpandButton.js';
import { RewardSwap } from '../../components/RewardSwap/RewardSwap.js';
import { useHeader } from '../../hooks/useHeader.js';
import { useWideVariant } from '../../hooks/useWideVariant.js';
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
import { HiddenUI } from '../../types/widget.js';
import { MainMessages } from './MainMessages.js';
import { ReviewButton } from './ReviewButton.js';
import { ListChainSelect } from '../../components/ListChainSelect/ListChainSelect.js';
import { SelectChainAndTokenCustom } from '../../components/SelectChainAndTokenCustom/SelectChainAndTokenCustom.js';
import { BtnShowCandlesChart } from '../../components/BtnShowCandlesChart/BtnShowCandlesChart.js';

export const MainPage: React.FC = () => {
  const { t } = useTranslation();
  const wideVariant = useWideVariant();
  const {
    subvariant,
    subvariantOptions,
    contractComponent,
    hiddenUI,
    hiddenBtnChartCandles,
  } = useWidgetConfig();
  const custom = subvariant === 'custom';
  const showPoweredBy = !hiddenUI?.includes(HiddenUI.PoweredBy);

  const title =
    subvariant === 'custom'
      ? t(`header.${subvariantOptions?.custom ?? 'checkout'}`)
      : subvariant === 'refuel'
        ? t(`header.gas`)
        : t(`header.exchange`);

  useHeader(title);

  return (
    <PageContainer>
      <ActiveTransactions sx={{ marginBottom: 2 }} />

      <ListChainSelect formType="from" />

      {custom ? (
        <ContractComponent sx={{ marginBottom: 2 }}>
          {contractComponent}
        </ContractComponent>
      ) : null}

      {/* <SelectChainAndToken mb={2} />
      {!custom ? (
        <AmountInput formType="from" sx={{ marginBottom: 2 }} />
      ) : null} */}

      <SelectChainAndTokenCustom mb={2} />

      {!wideVariant ? <Routes sx={{ marginBottom: 2 }} /> : null}
      {!wideVariant ? <RewardSwap sx={{ marginBottom: 2 }} /> : null}
      <SendToWalletButton sx={{ marginBottom: 2 }} />
      <GasRefuelMessage mb={2} />
      <MainMessages mb={2} />
      <Box display="flex" mb={showPoweredBy ? 1 : 3} gap={1.5}>
        <ReviewButton />
        <SendToWalletExpandButton />
      </Box>

      <Box
        display="flex"
        justifyContent="space-between"
        alignItems="center"
        pb={2}
      >
        {!hiddenBtnChartCandles ? <BtnShowCandlesChart /> : null}
        {showPoweredBy ? <PoweredBy /> : null}
      </Box>
    </PageContainer>
  );
};