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

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

const CustomerDetail = React.lazy(() => import('./customers/detail'));
const CreditGrantDetail = React.lazy(() => import('./customers/credit-grant/detail'));
const CreditTransactionDetail = React.lazy(() => import('./customers/credit-transaction/detail'));

const pages = {
  overview: React.lazy(() => import('./customers')),
};

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

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

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

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

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

  // @ts-ignore
  const TabComponent = pages[page] || pages.overview;
  const tabs = [{ label: t('admin.overview'), value: 'overview' }];

  return (
    <div>
      {/* @ts-ignore */}
      <Tabs
        // @ts-ignore
        tabs={tabs}
        // @ts-ignore
        current={page}
        // @ts-ignore
        onChange={onTabChange}
        scrollButtons="auto"
        variant="scrollable"
        sx={{
          '.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',
          },
        }}
      />
      {isValidElement(TabComponent) ? TabComponent : <TabComponent />}
    </div>
  );
}
