
import { mdiChartTimelineVariant } from '@mdi/js'
import Head from 'next/head'
import React, { ReactElement } from 'react'
import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import { getPageTitle } from '../../config'
import TableCourses from '../../components/Courses/TableCourses'
import BaseButton from '../../components/BaseButton'
import { useAppSelector } from '../../stores/hooks'
import { hasPermission } from '../../helpers/userPermissions'

const CoursesPage = () => {
  const { currentUser } = useAppSelector((state) => state.auth)
  const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_COURSES')

  return (
    <>
      <Head>
        <title>{getPageTitle('Courses')}</title>
      </Head>
      <SectionMain>
        <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Courses" main>
          {''}
        </SectionTitleLineWithButton>

        {hasCreatePermission && (
          <CardBox className="mb-6">
            <BaseButton href={'/courses/new'} color="info" label="Create Course" />
          </CardBox>
        )}

        <CardBox className="mb-6" hasTable>
          <TableCourses />
        </CardBox>
      </SectionMain>
    </>
  )
}

CoursesPage.getLayout = function getLayout(page: ReactElement) {
  return <LayoutAuthenticated permission={'READ_COURSES'}>{page}</LayoutAuthenticated>
}

export default CoursesPage
