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 SubscriptionDetail = React.lazy(() => import('./subscriptions/detail'));
const InvoiceDetail = React.lazy(() => import('./invoices/detail'));
const MeterDetail = React.lazy(() => import('./meters/detail'));
const MeterCreate = React.lazy(() => import('./meters/create'));
const MeterEventDetail = React.lazy(() => import('./meters/meter-event'));

const pages = {
  invoices: React.lazy(() => import('./invoices')),
  subscriptions: React.lazy(() => import('./subscriptions')),
  meters: React.lazy(() => import('./meters')),
  'meter-events': React.lazy(() => import('./meter-events')),
  overdue: React.lazy(() => import('./overdue')),
};

export default function BillingIndex() {
  const navigate = useNavigate();
  const { t } = useLocaleContext();
  const { page = 'invoices' } = useParams();
  const { startTransition } = useTransitionContext();

  if (page.startsWith('sub_')) {
    return <SubscriptionDetail id={page} />;
  }

  if (page.startsWith('in_')) {
    return <InvoiceDetail id={page} />;
  }

  if (page.startsWith('mtr_')) {
    return <MeterDetail id={page} />;
  }

  if (page.startsWith('mevt_')) {
    return <MeterEventDetail id={page} />;
  }

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

  // @ts-ignore
  const TabComponent = pages[page] || pages.subscriptions;
  const tabs = [
    { label: t('admin.invoices'), value: 'invoices' },
    { label: t('admin.subscriptions'), value: 'subscriptions' },
    { label: t('admin.meters'), value: 'meters' },
    { label: t('admin.meterEvents.title'), value: 'meter-events' },
    { label: t('admin.overdue.title'), value: 'overdue' },
  ];

  let extra = null;
  if (page === 'meters') {
    extra = <MeterCreate />;
  }

  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 />}
    </>
  );
}
