import { useEffect, useReducer, useState } from 'react';
import { initialState, reducer } from './reducer';
import { AxiosError, AxiosResponse } from 'axios';
import { FormMode } from '../../enums/formMode';
import ConfirmationDialog from '../confirmationDialog/ConfirmationDialog';
import { LogbookEntry } from './LogbookEntry.interface';
import LogbookCard from '../logbookCard/LogbookCard';
import { useOidc } from '../../auth/oidcConfig';
import httpClient from '../../httpClient/httpClient';
import { useUserRole } from '../../hooks/userRole/UseUserRole';
import { UserRole } from '../../enums/userRole';
import { useBreakpoints } from '../../hooks/useBreakpoints/UseBreakpoints';
import { ScreenSize } from '../../enums/screenSize';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAdd, faEllipsisVertical, faPen, faEye, faTrash, faAngleLeft, faAngleRight, faAnglesLeft, faAnglesRight } from '@fortawesome/free-solid-svg-icons'
import { CellContext, ColumnDef, flexRender, getCoreRowModel, HeaderContext, PaginationState, useReactTable } from '@tanstack/react-table';
import { useLogbookContext } from '../../hooks/logbookContext/UseLogbookContext';
import LogbookDrawer from '../logbookDrawer/LogbookDrawer';
import Alert from '../alert/Alert';
import TrackMap from '../trackMap/TrackMap';

interface ActionsProps {
  id: string;
}

const Logbook: React.FC<unknown> = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  const [columnVisibility, setColumnVisibility] = useState({});
  const logbookContext = useLogbookContext();
  const { isUserLoggedIn } = useOidc();
  const { userRole } = useUserRole();
  const { screenSize } = useBreakpoints();
  const Actions = ({ id }: ActionsProps) => {
    return (
      <div className='dropdown dropdown-end'>
        <div tabIndex={0} role='button' className='btn btn-ghost p-0'><FontAwesomeIcon icon={faEllipsisVertical} /></div>
        <ul tabIndex={-1} className="dropdown-content menu bg-base-100 rounded-box w-52 p-2 shadow-sm border border-base-300 !z-[100]">
          {isUserLoggedIn && userRole === UserRole.WRITE &&
            <li><a onClick={() => onOpenCloseDrawer(FormMode.EDIT, id)}><FontAwesomeIcon icon={faPen} />Edit</a></li>
          }
          <li><a onClick={() => onOpenCloseDrawer(FormMode.VIEW, id)}><FontAwesomeIcon icon={faEye} />View</a></li>
          {isUserLoggedIn && userRole === UserRole.WRITE &&
            <li><a onClick={() => onDeleteLog(id)}><FontAwesomeIcon icon={faTrash} />Delete</a></li>
          }
        </ul>
      </div>
    )
  }
  const columnTotal = (info: HeaderContext<LogbookEntry, unknown>): number => {
    const values: number[] = info.table.getPaginationRowModel().rows.map((row: any) => Number(row.getValue(info.column.id))).filter((value: any) => !Number.isNaN(value));
    let total: number = 0;
    
    if (values.length > 0) {
      total = values.reduce((accumulator, currentValue) => accumulator + currentValue, total)
    }
  
    return total;
  } 
  const pilotName: ColumnDef<LogbookEntry> = {
    id: 'pilotName',
    accessorKey: 'pilot',
    header: 'Pilot',
    footer: 'PAGE TOTALS',
    cell: (info: CellContext<LogbookEntry, unknown>) => {
      const pilot: any = info.getValue();
  
      return pilot.name
    }
  }
  const date: ColumnDef<LogbookEntry> = {
    id: 'date',
    accessorKey: 'date',
    header: 'Date',
    cell: (info: CellContext<LogbookEntry, unknown>) => {
      const date = new Date((info.getValue() as string).replace('Z', ''));
      const formattedDate = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`
  
      return formattedDate;
    }
  }
  const aircraftMakeModel: ColumnDef<LogbookEntry> = {
    id: 'aircraftMakeModel',
    accessorKey: 'aircraftMakeModel',
    header: 'Aircraft Make & Model'
  }
  const route: ColumnDef<LogbookEntry> = {
    id: 'route',
    header: 'Route of Flight',
    meta: {
      className: 'border-l border-base-300',
      headerAlign: 'text-center'
    },
    columns: [
      {
        id: 'routeFrom',
        accessorKey: 'routeFrom',
        header: 'From',
        meta: {
          className: 'border-l border-base-300',
        }
      },
      {
        id: 'routeTo',
        accessorKey: 'routeTo',
        header: 'To'
      }
    ]
  }
  const durationOfFlight: ColumnDef<LogbookEntry> = {
    id: 'durationOfFlight',
    accessorKey: 'durationOfFlight',
    header: 'Duration Of Flight',
    meta: {
      align: 'text-right',
      className: 'border-l border-base-300',
      headerAlign: 'text-right'
    },
    cell: (info: CellContext<LogbookEntry, unknown>) =>
      info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
    footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
  }
  const notes: ColumnDef<LogbookEntry> = {
    id: 'notes',
    accessorKey: 'notes',
    header: 'Notes',
    meta: {
      className: 'border-l border-base-300',
    }
  }
  const actions: ColumnDef<LogbookEntry> = {
    id: 'actions',
    header: 'Actions',
    meta: {
      align: 'text-center',
      className: 'border-l border-base-300',
      headerAlign: 'text-center'
    },
    cell: (info: CellContext<LogbookEntry, unknown>) => {
      return (
        <Actions id={info.row.original.id} />
      )
    }
  }
  
  const columns: ColumnDef<LogbookEntry>[] = [
    pilotName,
    date,
    aircraftMakeModel,
    {
      id: 'aircraftIdentity',
      accessorKey: 'aircraftIdentity',
      header: 'Aircraft Identity',
    },
    route,
    durationOfFlight,
    {
      id: 'singleEngineLand',
      accessorKey: 'singleEngineLand',
      header: 'Single Engine Land',
      meta: {
        align: 'text-right',
        headerAlign: 'text-right'
      },
      cell: (info: CellContext<LogbookEntry, unknown>) =>
        info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
      footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : ''
    },
    {
      id: 'landings',
      header: 'Landings',
      meta: {
        className: 'border-l border-base-300',
        headerAlign: 'text-center'
      },
      columns: [
        {
          id: 'landingsDay',
          accessorKey: 'landingsDay',
          header: 'Day',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
          meta: {
            align: 'text-right',
            className: 'border-l border-base-300',
            headerAlign: 'text-right'
          }
        },
        {
          id: 'landingsNight',
          accessorKey: 'landingsNight',
          header: 'Night',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          }
        }
      ]
    },
    {
      id: 'instrument',
      header: 'Instrument',
      meta: {
        className: 'border-l border-base-300',
        headerAlign: 'text-center'
      },
      columns: [
        {
          id: 'instrumentActual',
          accessorKey: 'instrumentActual',
          header: 'Actual',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            className: 'border-l border-base-300',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : '',
        },
        {
          id: 'instrumentSimulated',
          accessorKey: 'instrumentSimulated',
          header: 'Simulated',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'instrumentApproaches',
          accessorKey: 'instrumentApproaches',
          header: 'Approaches',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          }
        },
        {
          id: 'instrumentHolds',
          accessorKey: 'instrumentHolds',
          header: 'Holds',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          }
        },
        {
          id: 'instrumentNavTrack',
          accessorKey: 'instrumentNavTrack',
          header: 'Nav/Track',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          }
        }
      ]
    },
    {
      id: 'experienceTraining',
      header: 'Type of pilot experience or training',
      meta: {
        className: 'border-l border-base-300',
        headerAlign: 'text-center'
      },
      columns: [
        {
          id: 'groundTrainingReceived',
          accessorKey: 'groundTrainingReceived',
          header: 'Ground Training Received',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            className: 'border-l border-base-300',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'flightTrainingReceived',
          accessorKey: 'flightTrainingReceived',
          header: 'Flight Training Received',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'crossCountry',
          accessorKey: 'crossCountry',
          header: 'Cross Country',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'night',
          accessorKey: 'night',
          header: 'Night',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'solo',
          accessorKey: 'solo',
          header: 'Solo',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        },
        {
          id: 'pilotInCommand',
          accessorKey: 'pilotInCommand',
          header: 'Pilot In Command',
          footer: (info: HeaderContext<LogbookEntry, unknown>) => columnTotal(info) > 0 ? columnTotal(info).toFixed(1) : '',
          meta: {
            align: 'text-right',
            headerAlign: 'text-right'
          },
          cell: (info: CellContext<LogbookEntry, unknown>) =>
            info.getValue() ? parseFloat(info.getValue() as string).toFixed(1) : ''
        }
      ]
    },
    notes,
    actions
  ];

  const onPaginationChange = (updater: any) => {
    const newPaginationState: PaginationState = typeof updater === 'function' ? updater(state.pagination) : updater;

    dispatch({ type: 'SET_PAGINATION', payload: newPaginationState })
  }

  const table = useReactTable({
    data: state.entries,
    columns: columns,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,
    onColumnVisibilityChange: setColumnVisibility,
    onPaginationChange: onPaginationChange,
    rowCount: state.totalEntries,
    state: {
      columnVisibility: columnVisibility,
      pagination: state.pagination
    }
  });

  const {
    firstPage,
    getCanNextPage,
    getCanPreviousPage,
    getPageCount,
    getState,
    lastPage,
    nextPage,
    previousPage,
    setPageIndex
  } = table;

  const getLogbookEntries = async (pageIndex: number, pageSize: number) => {
    try {
      dispatch({ type: 'SET_IS_LOADING', payload: true });

      const response: AxiosResponse = await httpClient.get(`api/logs`, {
        params: {
          skip: pageIndex * pageSize,
          take: pageSize
        }
      });

      if (response.data.entities.length > 0) {
        const entries: LogbookEntry[] = response.data.entities;
        const entryColumns: string[] = Object.keys(entries[0]);
        const columnVisibility: {[key: string]: boolean} = {}

        for (const column of table.getAllLeafColumns()) {
          const entryColumnExists = entryColumns.find((entryColumn) => entryColumn === column.id);

          if (entryColumnExists) {
            columnVisibility[column.id] = true
          } else {
            columnVisibility[column.id] = false
          }
        }

        columnVisibility['pilotName'] = true
        columnVisibility['actions'] = true

        entries.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
        setColumnVisibility(columnVisibility)
        dispatch({ type: 'SET_ENTRIES', payload: { entries: entries, totalEntries: response.data.total }});

        if (!isUserLoggedIn && response.data.entities.length >= 5) {
          dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'A limited number of log entries displayed. Sign in to view all log entries.'}})
        } else {
          dispatch({ type: 'SET_ALERT', payload: undefined})
        }
      } else {
        dispatch({ type: 'SET_ALERT', payload: { severity: 'info', message: 'No logbook entries found.'}})
      }
    } catch (error) {
      const axiosError = error as AxiosError;

      dispatch({
        type: 'SET_ALERT',
        payload: { severity: 'error', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
      });
    } finally {
      dispatch({ type: 'SET_IS_LOADING', payload: false });
    }
  };

  const onOpenCloseDrawer= (mode: FormMode, logId?: string) => {
    switch (mode) {
      case FormMode.ADD:
      case FormMode.EDIT:
      case FormMode.VIEW:
        logbookContext.dispatch({
          type: 'SET_OPEN_CLOSE_DRAWER',
          payload: {
            formMode: mode,
            selectedLogId: logId!,
            isDrawerOpen: true
          }
        });

        break;
      case FormMode.CANCEL:
        logbookContext.dispatch({
          type: 'SET_OPEN_CLOSE_DRAWER',
          payload: {
            formMode: mode,
            selectedLogId: undefined,
            isDrawerOpen: false
          }
        });

        break;
    }
  };

  const onDeleteLog = (logId: string) => {
    dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_OPEN', payload: true });
    logbookContext.dispatch({ type: 'SET_SELECTED_LOG_ID', payload: logId })
  };

  const onConfirmationDialogConfirm = async () => {
    try {
      dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: true });

      await httpClient.delete(`api/logs/${logbookContext.state.selectedLogId}`);

      dispatch({
        type: 'SET_IS_CONFIRMATION_DIALOG_OPEN',
        payload: false
      });
      logbookContext.dispatch({ type: 'SET_SELECTED_LOG_ID', payload: '' })
      await getLogbookEntries(state.pagination?.pageIndex, state.pagination?.pageSize);
    } catch (error) {
      const axiosError = error as AxiosError;

      dispatch({
        type: 'SET_ALERT',
        payload: { severity: 'error', message: `Loading of logbook entries failed with the following message: ${axiosError.message}`}
      });
    } finally {
      dispatch({ type: 'SET_IS_CONFIRMATION_DIALOG_LOADING', payload: false });
    }
  };

  const onConfirmationDialogCancel = () => {
    dispatch({
      type: 'SET_IS_CONFIRMATION_DIALOG_OPEN',
      payload: false
    });
  };

  const onRowsPerPageChanged = (event: any) => {
    const newPaginationState: PaginationState = {
      pageIndex: 0,
      pageSize: event.target.value !== 'All' ? Number(event.target.value) : state.totalEntries
    };

    dispatch({ type: 'SET_PAGINATION', payload: newPaginationState })
  }

  useEffect(() => {
    if (!logbookContext.state.isDrawerOpen) {
      getLogbookEntries(state.pagination.pageIndex, state.pagination.pageSize);
    }
  }, [logbookContext.state.isDrawerOpen, state.pagination.pageIndex, state.pagination.pageSize]);

  useEffect(() => {
    const pages: number[] = [];

    if (state.pagination?.pageSize) {
      const totalPages = getPageCount();

      for(let i = 0; i < totalPages; i++) {
        pages.push(i + 1)
      }
    }

    dispatch({ type: 'SET_PAGES', payload: pages })
  }, [state.totalEntries, state.pagination?.pageSize])

  useEffect(() => {
    console.log(state.alert)
  }, [state.alert])

  return (
    <>
      <div className={`${screenSize === ScreenSize.SM ? 'mr-4 ml-4' : 'mr-10 ml-10'} grid grid-cols-12`}>
        <div className='prose max-w-none col-span-6 mt-5 mb-5'>
          <h1>Logbook</h1>
        </div>
        <div className='col-span-6 justify-self-end self-center'>
          {userRole === UserRole.WRITE &&
            <button className='btn btn-primary'
              onClick={() => onOpenCloseDrawer(FormMode.ADD)}
            >
              <FontAwesomeIcon icon={faAdd} />
              Add Entry
            </button>
          }
        </div>
        {!state.isLoading && state.alert && (
          <div className='col-span-12 mb-5'>
            <Alert
              className='mb-5'
              onClose={() =>
                dispatch({ type: 'SET_ALERT', payload: undefined })
              }
              severity={state.alert.severity}
            >
              {state.alert.message}
            </Alert>
          </div>
        )}
        {!state.isLoading && state.entries.length > 0 && screenSize !== ScreenSize.SM && screenSize !== ScreenSize.MD && (
          <div className='col-span-12 pr-5 pb-5 pl-5 bg-base-100 border border-base-100 rounded-lg '>
            <div className='overflow-x-auto mb-5'>
              <div className='col-span-12 justify-self-end self-center mt-1 mr-1 mb-2'>
                <label className='select select-sm select-ghost'>
                  <span className='label'>Rows per page</span>
                  <select
                    defaultValue={1}
                    onChange={onRowsPerPageChanged}
                    value={state.pagination?.pageSize}
                  >
                    <option value={10}>10</option>
                    <option value={25}>25</option>
                    <option value={50}>50</option>
                    <option value={state.totalEntries}>All</option>
                  </select>
                </label>
                
              </div>
              <table className='table min-w-full h-auto table-auto w-full'>
                <thead className='bg-base-200'>
                  {table.getHeaderGroups().map((headerGroup, headerGroupIndex) => (
                    <tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={headerGroup.id}>
                      {headerGroup.headers.map((header, headerIndex) => {
                        return (
                          <th
                            className={`${header.column.columnDef.meta?.className ? header.column.columnDef.meta?.className : ''} group/th px-3 h-10 align-middle whitespace-nowrap text-foreground-500 text-tiny font-semibold ${headerGroupIndex === 0 ? 'first:rounded-tl-lg last:rounded-tr-lg' : ''} ${headerGroupIndex === table.getHeaderGroups().length - 1 ? 'first:rounded-bl-lg last:rounded-br-lg' : ''} data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start`}
                            colSpan={header.colSpan}
                            key={header.id}
                          >
                            {header.isPlaceholder ? null : (
                              <div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
                                {flexRender(
                                  header.column.columnDef.header,
                                  header.getContext()
                                )}
                                {/* {header.column.getCanFilter() ? (
                                  <div>
                                    <Filter column={header.column} table={table} />
                                  </div>
                                ) : null} */}
                              </div>
                            )}
                          </th>
                        );
                      })}
                    </tr>
                  ))}
                </thead>
                <tbody>
                  <>
                    {table.getRowModel().rows.map((row) => {
                      return (
                        <tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={row.id}>
                          {row.getVisibleCells().map((cell) => {
                            return (
                              <td
                                className={`py-2 px-3 relative align-middle whitespace-normal text-small font-normal [&>*]:relative outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 before:pointer-events-none before:content-[''] before:absolute before:z-0 before:inset-0 before:opacity-0 data-[selected=true]:before:opacity-100 group-data-[disabled=true]/tr:text-foreground-300 group-data-[disabled=true]/tr:cursor-not-allowed before:bg-default/60 data-[selected=true]:text-default-foreground first:before:rounded-s-lg last:before:rounded-e-lg text-start`}
                                key={cell.id}
                              >
                                <div className={`${cell.column.columnDef.meta?.align ? cell.column.columnDef.meta?.align : ''}`}>
                                  {flexRender(
                                    cell.column.columnDef.cell,
                                    cell.getContext()
                                  )}
                                </div>
                              </td>
                            );
                          })}
                        </tr>
                      );
                    })}
                  </>
                </tbody>
                <thead className='[&>tr]:first:rounded-lg bg-base-200'>
                  {table.getFooterGroups().map((footerGroup, index) => {
                    if (index === 0) {
                      return (
                        <tr className='group/tr outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2' key={footerGroup.id}>
                          {footerGroup.headers.map((header) => {
                            return (
                              <td
                                className='roup/th px-3 h-10 align-middle bg-default-100 whitespace-nowrap text-foreground-500 text-tiny font-semibold first:rounded-s-lg last:rounded-e-lg data-[sortable=true]:cursor-pointer data-[hover=true]:text-foreground-400 outline-solid outline-transparent data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-focus data-[focus-visible=true]:outline-offset-2 text-start'
                                key={header.id}
                              >
                                <div className={`${header.column.columnDef.meta?.headerAlign ? header.column.columnDef.meta?.headerAlign : ''}`}>
                                  {header.isPlaceholder
                                    ? null
                                    : flexRender(
                                        header.column.columnDef.footer,
                                        header.getContext()
                                      )
                                    }
                                </div>
                              </td>
                            );
                          })}
                        </tr>
                      );
                    }
                  })}
                </thead>
              </table>
            </div>
            {state.pagination.pageSize !== state.totalEntries &&
              <div className='col-span-12 justify-self-center self-center'>
                <div className='join'>
                  <button
                    className='join-item btn btn-sm'
                    onClick={firstPage}
                  >
                    <FontAwesomeIcon icon={faAnglesLeft} />
                  </button>
                  <button
                    className='join-item btn btn-sm'
                    onClick={previousPage}
                    disabled={!getCanPreviousPage()}
                  >
                    <FontAwesomeIcon icon={faAngleLeft} />
                  </button>
                  {state.pages.map((page, index) => {
                    return (
                      <button
                        className={`join-item btn btn-sm ${getState().pagination.pageIndex === index ? 'btn-active' : ''}`}
                        onClick={() => setPageIndex(index)}
                      >
                        {page}
                      </button>
                    )
                  })}
                  <button
                    className='join-item btn btn-sm'
                    onClick={() => nextPage()}
                    disabled={!getCanNextPage()}
                  >
                    <FontAwesomeIcon icon={faAngleRight} />
                  </button>
                  <button
                    className='join-item btn btn-sm'
                    onClick={lastPage}
                  >
                    <FontAwesomeIcon icon={faAnglesRight} />
                  </button>
                </div>
              </div>
            }
          </div>
        )}
        {state.entries.length > 0 && screenSize === ScreenSize.SM &&
          <div className='col-span-12'>
            <>
              {table.getRowModel().rows.map((row) => {
                const date = new Date(row.original.date.replace('Z', ''));
                const formattedDate: string = `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()}`;

                return (
                  <div className='card bg-base-100 border border-base-300 mb-5'>
                    <div className={`card-body ${screenSize === ScreenSize.SM || screenSize === ScreenSize.MD ? 'p-4' : ''}`} key={row.id}>
                      <div className={`grid grid-cols-12 gap-3`}>
                        <>
                          <div className='col-span-8'>
                            <h2 className='card-title font-bold text-2xl'>{formattedDate}</h2>
                          </div>
                          <div className='col-span-4 justify-self-end self-center'>
                            <Actions id={row.original.id} />
                          </div>
                          {row.getVisibleCells().map((cell) => {
                            return (
                              <>
                                {cell.column.columnDef.header !== 'Actions' && cell.column.columnDef.header !== 'Date' && cell.column.columnDef.header !== 'Pilot' &&
                                  <>
                                    <div className='col-span-8 font-bold'>
                                      <span>{cell.getContext().column.columnDef.header?.toString()}</span>
                                    </div>
                                    <div className='col-span-4'>
                                      <span>{flexRender(cell.column.columnDef.cell, cell.getContext())}</span>
                                    </div>
                                  </>
                                }
                              </>
                            )
                          })}
                        </>
                      </div>
                    </div>
                  </div>
                )
              })}
            </>
          </div>
        }
        {state.isLoading && !state.alert && (
          <div className='col-span-12 p-5 bg-base-100 border border-base-100 rounded-lg'>
            <div className='col-span-12 justify-self-center'>
              <span className='loading loading-spinner loading-xl' />
            </div>
            <div className='col-span-12 justify-self-center'>
              Loading...
            </div>
          </div>
        )}
      </div>
      {logbookContext.state.isDrawerOpen && (
        <LogbookDrawer
          onOpenClose={(mode) => onOpenCloseDrawer(mode)}
        />
      )}
      {state.isConfirmDialogOpen && (
        <ConfirmationDialog
          contentText="Are you sure you want to delete the logbook entry?"
          isLoading={state.isConfirmDialogLoading}
          isOpen={state.isConfirmDialogOpen}
          onCancel={onConfirmationDialogCancel}
          onConfirm={onConfirmationDialogConfirm}
          title="Confirm Delete"
        />
      )}
    </>
  );
};

export default Logbook;
