import * as React from 'react';
import { useTranslation } from 'next-i18next';
import Link from 'next/link';
import Box from '@mui/material/Box';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TablePagination from '@mui/material/TablePagination';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import Skeleton from '@mui/material/Skeleton';
import { useSnackbar } from 'notistack';

import { useZendeskUserRequests } from 'src/utils/hook';
import TicketStatusChips, {
  TicketStatusType,
} from 'src/components/Chip/TicketStatus';
import { Users } from 'src/types/zendesk';

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

export interface RequestItem {
  id: number;
  subject: string;
  requester_id: number;
  created_at: string;
  updated_at: string;
  status: string;
}

export interface ParsedRequestItem extends RequestItem {
  requester_name: string;
  status_label: string;
}

interface HeaderCell {
  id: string;
  label: string;
  transKey?: string;
  align?: 'left' | 'right' | 'center';
  disablePadding?: boolean;
}

const headerCells: readonly HeaderCell[] = [
  {
    id: 'id',
    label: 'ID',
    align: 'left',
  },
  {
    id: 'subject',
    label: 'Subject',
    transKey: 'subject',
  },
  {
    id: 'requester_id',
    label: 'Requester ID',
    transKey: 'requester_id',
  },
  {
    id: 'created_at',
    label: 'Created At',
    transKey: 'created_at',
  },
  {
    id: 'updated_at',
    label: 'Updated At',
    transKey: 'updated_at',
  },
  {
    id: 'status',
    label: 'Status',
    transKey: 'status',
  },
];

export default function EnhancedTable(props: { type: 'requested' | 'ccd' }) {
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(50);
  const [parsedData, setParsedData] = React.useState<ParsedRequestItem[]>([]);

  const zendeskData = useRecoilValue(zendeskDataState);

  const {
    data,
    users,
    loading: urLoading,
    error,
  } = useZendeskUserRequests({
    type: props.type,
    token: zendeskData.token || '',
    page: page + 1,
  });

  const { t } = useTranslation();
  const { enqueueSnackbar } = useSnackbar();

  React.useEffect(() => {
    if (error) {
      console.error(error);
      enqueueSnackbar(`${error}`, {
        variant: 'error',
      });
    }
  }, [enqueueSnackbar, error]);

  const filterUserNameByIDCallback = (usersData: Users[], userID: number) => {
    const targetUser = usersData.find((item) => item.id === userID);
    return targetUser?.name || `${userID}`;
  };

  const handleChangePage = (event: unknown, newPage: number) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  return (
    <Box sx={{ width: '100%' }}>
      <Paper sx={{ width: '100%', mb: 2 }}>
        <TableContainer>
          <Table
            sx={{ minWidth: 750 }}
            aria-labelledby="tableTitle"
            size="medium"
          >
            <TableHead>
              <TableRow>
                {headerCells.map((headCell) => {
                  return (
                    <TableCell
                      key={headCell.id}
                      align={headCell.align || 'right'}
                      padding={headCell.disablePadding ? 'none' : 'normal'}
                    >
                      {headCell.transKey
                        ? t(`requests.table_header_${headCell.transKey}`)
                        : headCell.label}
                    </TableCell>
                  );
                })}
              </TableRow>
            </TableHead>
            <TableBody>
              {data &&
                data?.requests &&
                data.requests.map((requestItem: RequestItem, index: number) => {
                  return (
                    <TableRow tabIndex={-1} key={requestItem.id}>
                      <TableCell
                        component="th"
                        id={`${requestItem.id}`}
                        scope="row"
                      >
                        <Link href={`/requests/${requestItem.id}`}>
                          <Typography
                            variant="body2"
                            sx={{
                              cursor: 'pointer',
                              '&:hover': {
                                textDecoration: 'underline',
                              },
                            }}
                          >
                            {requestItem.id}
                          </Typography>
                        </Link>
                      </TableCell>
                      <TableCell align="right">
                        <Link href={`/requests/${requestItem.id}`}>
                          <Typography
                            variant="body2"
                            sx={{
                              cursor: 'pointer',
                              '&:hover': {
                                textDecoration: 'underline',
                              },
                            }}
                          >
                            {requestItem.subject}
                          </Typography>
                        </Link>
                      </TableCell>
                      <TableCell align="right">
                        {filterUserNameByIDCallback(
                          users,
                          requestItem.requester_id
                        )}
                      </TableCell>
                      <TableCell align="right">
                        {new Date(requestItem.created_at).toLocaleString()}
                      </TableCell>
                      <TableCell align="right">
                        {new Date(requestItem.updated_at).toLocaleString()}
                      </TableCell>
                      <TableCell align="right">
                        <TicketStatusChips
                          type={requestItem.status as TicketStatusType}
                        />
                      </TableCell>
                    </TableRow>
                  );
                })}
              {urLoading && (
                <TableRow
                  style={{
                    height: 53,
                  }}
                >
                  <TableCell colSpan={headerCells.length + 1}>
                    <Skeleton />
                  </TableCell>
                </TableRow>
              )}
              {!urLoading && data?.requests?.length === 0 && (
                <TableRow
                  style={{
                    height: 212,
                  }}
                >
                  <TableCell colSpan={headerCells.length + 1} align="center">
                    {t('requests.table_no_data')}
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </TableContainer>
        {data?.requests && data?.requests?.length !== 0 && (
          <TablePagination
            rowsPerPageOptions={[50]}
            component="div"
            count={data?.count || 0}
            rowsPerPage={rowsPerPage}
            page={page}
            onPageChange={handleChangePage}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        )}
      </Paper>
    </Box>
  );
}