import * as React from 'react';
import type { NextPage } from 'next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { useSnackbar } from 'notistack';

import Layout from 'src/components/Layout';
import { Pages } from 'src/constants';
import RequestsTable from 'src/components/Table/RequestsTable';
// import { useZendeskMe } from 'src/utils/hook';
import logger from 'next-pino/logger';

import { zendeskDataState } from 'src/atom';
import { useRecoilValue } from 'recoil';

interface TabPanelProps {
  children?: React.ReactNode;
  index: number;
  value: number;
}

// function TabPanel(props: TabPanelProps) {
//   const { children, value, index, ...other } = props;

//   return (
//     <div
//       role="tabpanel"
//       hidden={value !== index}
//       id={`simple-tabpanel-${index}`}
//       aria-labelledby={`simple-tab-${index}`}
//       {...other}
//     >
//       {value === index && (
//         <Box sx={{ p: 3 }}>
//           <Typography>{children}</Typography>
//         </Box>
//       )}
//     </div>
//   );
// }

function a11yProps(index: number) {
  return {
    id: `simple-tab-${index}`,
    'aria-controls': `simple-tabpanel-${index}`,
  };
}

const Home: NextPage = () => {
  const [value, setValue] = React.useState(0);

  // const auth0Meta = useRecoilValue(auth0MetaState);
  const zendeskData = useRecoilValue(zendeskDataState);
  const { t } = useTranslation();
  // const { data, loading, error } = useZendeskMe(zendeskData?.token || '');
  const { enqueueSnackbar } = useSnackbar();

  // React.useEffect(() => {
  //   if (error) {
  //     logger.error(
  //       { error, name: 'requests' },
  //       'Error fetching Zendesk user data'
  //     );
  //     enqueueSnackbar(
  //       `${error?.response?.data?.message || error?.message || error}`,
  //       { variant: 'error' }
  //     );
  //   }
  // }, [enqueueSnackbar, error]);

  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };

  return (
    <Layout
      title="Requests"
      description="View my requests."
      breadcrumbs={[
        { id: 'home', path: Pages.Home, label: t('pages.home') },
        { id: 'requests', label: t('pages.requests') },
      ]}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          gap: '2.5rem',
        }}
      >
        <Typography variant="h2" component="h1">
          {t('requests.title')}
        </Typography>

        <Box sx={{ width: '100%' }}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
            <Tabs
              value={value}
              onChange={handleChange}
              aria-label="basic tabs example"
            >
              <Tab label={t('requests.my_requests')} {...a11yProps(0)} />
              <Tab label={t('requests.my_cc_requests')} {...a11yProps(1)} />
            </Tabs>
          </Box>
          {/* <TabPanel value={value} index={0}>
            {!error && (
              <RequestsTable
                userId={data?.id}
                type="requested"
                loading={loading}
              />
            )}
          </TabPanel>
          <TabPanel value={value} index={1}>
            {!error && (
              <RequestsTable userId={data?.id} type="ccd" loading={loading} />
            )}
          </TabPanel> */}
          {value === 0 && (
            <Box>
              <RequestsTable type="requested" />
            </Box>
          )}
          {value === 1 && (
            <Box>
              <RequestsTable type="ccd" />
            </Box>
          )}
        </Box>
      </Box>
    </Layout>
  );
};

export async function getStaticProps({ locale }: any) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])),
      // Will be passed to the page component as props
    },
  };
}

export default Home;