import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import Tabs from '@arcblock/ux/lib/Tabs';
import { Box, Stack } from '@mui/material';
import React, { isValidElement } from 'react';
import { useNavigate, useParams } from 'react-router-dom';

import { useTransitionContext } from '../../../components/progress-bar';

const PaymentMethodCreate = React.lazy(() => import('./payment-methods/create'));

const pages = {
  'payment-methods': React.lazy(() => import('./payment-methods')),
  'vault-config': React.lazy(() => import('./vault-config')),
  // business: React.lazy(() => import('./business')),
};

export default function SettingsIndex() {
  const navigate = useNavigate();
  const { t } = useLocaleContext();
  const { page = 'payment-methods' } = useParams();
  const { startTransition } = useTransitionContext();

  const onTabChange = (newTab: string) => {
    startTransition(() => {
      navigate(`/admin/settings/${newTab}`);
    });
  };

  // @ts-ignore
  const TabComponent = pages[page] || pages.paymentMethods;
  const tabs = [
    { label: t('admin.paymentMethods'), value: 'payment-methods' },
    { label: t('admin.vaultConfig.title'), value: 'vault-config' },
    // { label: t('admin.business'), value: 'business' },
  ];

  let extra = null;
  if (page === 'payment-methods') {
    extra = <PaymentMethodCreate />;
  }

  return (
    <>
      <Stack
        direction="row"
        spacing={1}
        sx={{
          alignItems: 'flex-start',
          justifyContent: 'end',
          flexWrap: 'wrap',
        }}>
        {/* @ts-ignore */}
        <Tabs
          // @ts-ignore
          tabs={tabs}
          // @ts-ignore
          current={page}
          // @ts-ignore
          onChange={onTabChange}
          scrollButtons="auto"
          variant="scrollable"
          sx={{
            flex: '1 0 auto',
            maxWidth: '100%',
            '.MuiTab-root': {
              color: 'text.lighter',
            },
            '.MuiTabs-indicator': {
              display: 'none',
            },
            '.Mui-selected': {
              fontSize: 24,
              color: 'text.primary',
            },
            '.MuiTabs-hideScrollbar': {
              border: 'none !important',
            },
            '.MuiTouchRipple-root': {
              display: 'none',
            },
          }}
        />
        <Box> {extra}</Box>
      </Stack>
      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
    </>
  );
}
