/* ---------------------------------- @mui ---------------------------------- */
import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Stack,
  Button,
  TableSortLabel,
  Box,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useState } from 'react';
/* -------------------------------- component ------------------------------- */
import Iconify from '../../components/Iconify';
import BaseTablePagination from '../../components/BaseTablePagination';
/* ---------------------------------- hooks --------------------------------- */
import useMap from '../../hooks/useMap';
/* ---------------------------------- theme --------------------------------- */
import palette from '../../theme/palette';

/* ---------------------------------- types --------------------------------- */

type PaginationTableProps = {
  current_page: number;
  from: number;
  last_page: number;
  links: [];
  path: string;
  per_page: number;
  to: number;
  total: number;
};

type DataTableProps = {
  name: string;
  member_id: string;
  service: string;
  start_date: string;
  end_date: string;
  status: string;
};

/* -------------------------------------------------------------------------- */

/* -------------------------- enchanced table head -------------------------- */

type Order = 'asc' | 'desc';

interface HeadCell {
  id: string;
  label: string;
}

const headCells: readonly HeadCell[] = [
  {
    id: 'name',
    label: 'Name',
  },
  {
    id: 'member_id',
    label: 'Member ID',
  },
  {
    id: 'service',
    label: 'Service',
  },
  {
    id: 'start_date',
    label: 'Start Date',
  },
  {
    id: 'end_date',
    label: 'End Date',
  },
  {
    id: 'status',
    label: 'Status',
  },
];

interface EnhancedTableProps {
  onRequestSort: (event: React.MouseEvent<unknown>, property: string) => void;
  order: Order;
  orderBy: string;
}

function EnhancedTableHead(props: EnhancedTableProps) {
  const { order, orderBy, onRequestSort } = props;
  const createSortHandler = (property: string) => (event: React.MouseEvent<unknown>) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead>
      <TableRow>
        <TableCell align="center">No</TableCell>
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            sortDirection={orderBy === headCell.id ? order : false}
            align="center"
          >
            <TableSortLabel
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <Box component="span" sx={visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </Box>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

/* -------------------------------------------------------------------------- */

export default function List() {
  const [order, setOrder] = useState<Order>('asc');
  const [orderBy, setOrderBy] = useState('name');
  const [customSearchParams, setCustomSearchParams] = useMap<string, any>();
  const [isLoading, setIsLoading] = useState(true);
  const [dataTable, setDataTable] = useState([]);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(10);
  const [paginationTable, setPaginationTable] = useState<PaginationTableProps>({
    current_page: 0,
    from: 0,
    last_page: 0,
    links: [],
    path: '',
    per_page: 0,
    to: 0,
    total: 0,
  });

  /* ------------------------------- handle sort ------------------------------ */
  const handleRequestSort = async (event: React.MouseEvent<unknown>, property: string) => {
    const isAsc = orderBy === property && order === 'asc';
    setOrder(isAsc ? 'desc' : 'asc');
    setOrderBy(property);
    const params = Object.fromEntries([
      ...customSearchParams.entries(),
      ['order', isAsc ? 'desc' : 'asc'],
      ['orderBy', property],
    ]);
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 500));
    loadDataTable(params);
    setIsLoading(false);
  };
  /* -------------------------------------------------------------------------- */

  /* ------------------------------ Search field ------------------------------ */
  const [searchText, setSearchText] = useState('');

  const handleSearch = (event: any) => {
    setSearchText(event.target.value);
  };

  const handleSearchSubmit = async (event: any) => {
    event.preventDefault();
    const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 500));
    loadDataTable(params);
    setIsLoading(false);
  };
  /* -------------------------------------------------------------------------- */

  /* --------------------------- Load Data Table API -------------------------- */
  const loadDataTable = async (appliedParams: any | null = null) => {
    setIsLoading(true);

    const params = appliedParams
      ? appliedParams
      : Object.fromEntries([
          ...customSearchParams.entries(),
          ['order', order],
          ['orderBy', orderBy],
        ]);
    const response = await axios.get('http://localhost:8001/api/alarm-center', { params: params });

    setDataTable(response.data.data);
    setPaginationTable(response.data.meta);
    setRowsPerPage(response.data.meta.per_page);
    setIsLoading(false);
  };
  /* -------------------------------------------------------------------------- */

  /* ------------------------ button change pagination ------------------------ */
  const onPageChangeHandle = async (event: unknown, newPage: number) => {
    const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
    setPage(newPage);
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 500));
    loadDataTable(params);
    setIsLoading(false);
    setCustomSearchParams.set('page', newPage + 1);
  };
  /* -------------------------------------------------------------------------- */

  /* ----------------------- row page per limit on click ---------------------- */
  const onRowsPerPageChangeHandle = async (event: React.ChangeEvent<HTMLInputElement>) => {
    setPage(0);
    const params = Object.fromEntries([
      ...customSearchParams.entries(),
      ['page', 0],
      ['per_page', parseInt(event.target.value, 10)],
    ]);
    setRowsPerPage(parseInt(event.target.value, 10));
    setIsLoading(true);
    await new Promise((resolve) => setTimeout(resolve, 500));
    loadDataTable(params);
    setIsLoading(false);
    setCustomSearchParams.set('per_page', parseInt(event.target.value, 10));
  };
  /* -------------------------------------------------------------------------- */

  useEffect(() => {
    loadDataTable();
  }, []);

  return (
    <Stack>
      {/* Search */}
      <form onSubmit={handleSearchSubmit} style={{ width: '100%', padding: '20px 24px' }}>
        <TextField
          id="search-input"
          label="Search"
          variant="outlined"
          fullWidth
          onChange={handleSearch}
          value={searchText}
        />
      </form>

      {/* The Main Table */}
      <TableContainer component={Paper}>
        <Table aria-label="collapsible table">
          <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
          <TableBody>
            {isLoading ? (
              <TableRow>
                <TableCell colSpan={8} align="center">
                  Loading . . .
                </TableCell>
              </TableRow>
            ) : dataTable.length >= 1 ? (
              dataTable.map((row: DataTableProps, index) => (
                <TableRow key={index}>
                  <TableCell align="center">{paginationTable.from + index++}</TableCell>
                  <TableCell align="center">{row.name}</TableCell>
                  <TableCell align="center">{row.member_id}</TableCell>
                  <TableCell align="center">{row.service}</TableCell>
                  <TableCell align="center">{row.start_date}</TableCell>
                  <TableCell align="center">{row.end_date}</TableCell>
                  <TableCell align="center">
                    {row.status.toLowerCase() === 'done' ? (
                      <Button
                        startIcon={<Iconify icon="ic:round-check" />}
                        sx={{
                          backgroundColor: palette.light.grey[300],
                          color: palette.light.grey[800],
                          paddingX: 1.5,
                          paddingY: 1,
                          '&:hover': {
                            backgroundColor: palette.light.grey[400],
                            color: palette.light.grey[800],
                          },
                        }}
                      >
                        {row.status}
                      </Button>
                    ) : (
                      <Button
                        startIcon={<Iconify icon="fa6-solid:clock" />}
                        sx={{
                          backgroundColor: '#CD7B2E',
                          color: '#FFFF',
                          paddingX: 1.5,
                          paddingY: 1,
                          '&:hover': {
                            backgroundColor: '#BF6919',
                            color: '#FFFF',
                          },
                        }}
                      >
                        {row.status}
                      </Button>
                    )}
                  </TableCell>
                </TableRow>
              ))
            ) : (
              <TableRow>
                <TableCell colSpan={8} align="center">
                  No Data Found
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </TableContainer>

      {/* Pagination */}
      <BaseTablePagination
        count={paginationTable.total}
        onPageChange={onPageChangeHandle}
        page={page}
        rowsPerPage={rowsPerPage}
        onRowsPerPageChange={onRowsPerPageChangeHandle}
      />
    </Stack>
  );
}
