import { mdiViewList, mdiChartTimelineVariant } from '@mdi/js';
import Head from 'next/head';
import React, { useEffect, useState } from 'react';
import type { ReactElement } from 'react';
import LayoutAuthenticated from '../layouts/Authenticated';
import SectionMain from '../components/SectionMain';
import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
import { getPageTitle } from '../config';
import { useAppDispatch, useAppSelector } from '../stores/hooks';
import { fetch } from '../stores/job_logs/job_logsSlice';
import ListJob_logs from '../components/Job_logs/ListJob_logs';

const MyLogsPage = () => {
  const dispatch = useAppDispatch();
  const currentUser = useAppSelector((state) => state.auth.currentUser);
  const { job_logs, loading } = useAppSelector((state) => state.job_logs);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    if (currentUser?.id) {
      dispatch(fetch({ filter: { employee: currentUser.id }, page: currentPage }));
    }
  }, [dispatch, currentUser, currentPage]);

  return (
    <>
      <Head>
        <title>{getPageTitle('My Logs')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiViewList} title="My Logs" main>
          {''}
        </SectionTitleLineWithButton>
        <ListJob_logs
          job_logs={job_logs}
          loading={loading}
          onDelete={() => console.log('Delete')}
          currentPage={currentPage}
          numPages={1}
          onPageChange={setCurrentPage}
        />
      </SectionMain>
    </>
  );
};

MyLogsPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
};

export default MyLogsPage;
