import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import { useAppInfo } from '@blocklet/ui-react/lib/Dashboard';
import { Stack } from '@mui/material';
import React, { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import Tabs from '@arcblock/ux/lib/Tabs';

import Layout from '../../components/layout/admin';
import ProgressBar, { useTransitionContext } from '../../components/progress-bar';
import { useSessionContext } from '../../contexts/session';

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

function Integrations() {
  const navigate = useNavigate();
  const { t } = useLocaleContext();
  const { updateAppInfo } = useAppInfo();
  const { group = 'overview' } = useParams();
  const { isPending, startTransition } = useTransitionContext();

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

  // @ts-ignore
  const TabComponent = pages[group] || pages.overview;
  const tabs = [
    { label: t('common.quickStarts'), value: 'overview' },
    { label: t('admin.donate.title'), value: 'donations' },
  ];

  useEffect(() => {
    updateAppInfo({
      description: t('integrations.description'),
    });
  }, [t]);

  return (
    <>
      <ProgressBar pending={isPending} />
      <Stack
        direction="row"
        spacing={1}
        sx={{
          alignItems: 'center',
          justifyContent: 'end',
          flexWrap: 'wrap',
          mt: 1,
          pb: 2,
        }}>
        <Tabs
          tabs={tabs}
          current={group}
          onChange={onTabChange}
          scrollButtons="auto"
          variant="scrollable"
          sx={{
            flex: '1 0 auto',
            maxWidth: '100%',
            '.MuiTab-root': {
              marginBottom: '12px',
              fontWeight: '500',
              color: 'text.lighter',
              '&.Mui-selected': {
                color: 'primary.main',
              },
            },
            '.MuiTouchRipple-root': {
              display: 'none',
            },
          }}
        />
      </Stack>
      <div className="page-content">{React.isValidElement(TabComponent) ? TabComponent : <TabComponent />}</div>
    </>
  );
}

export default function WrappedIntegrations() {
  const { session } = useSessionContext();
  const navigate = useNavigate();
  useEffect(() => {
    if (session.user && ['owner', 'admin'].includes(session.user.role) === false) {
      navigate('/customer');
    }
  }, [session.user]);
  return (
    <Layout>
      <Integrations />
    </Layout>
  );
}
