import { flexRender } from '@tanstack/react-table'
import { Table } from 'flowbite-react'
import { FaSort } from 'react-icons/fa'
import { FaSortDown, FaSortUp } from 'react-icons/fa6'

import ModalReportCard from './ModalUploadGradeReport'
import { useGradesReportTable } from './useGradesReportTable'

interface Props {
  studentId: string
}

export default function GradesReportsTable({ studentId }: Props) {
  const {
    studyYearSelected,
    isUploadModalOpen,
    handleCloseUploadModal,
    getHeaderGroups,
    getRowModel,
  } = useGradesReportTable(studentId)

  return (
    <>
      <Table>
        <Table.Head className="text-text-color-01 bg-slate-50">
          {getHeaderGroups().map(headerGroup =>
            headerGroup.headers.map(header => (
              <Table.HeadCell
                key={header.id}
                colSpan={header.colSpan}
                className="text-center">
                <div
                  className="flex items-center justify-center"
                  onClick={header.column.getToggleSortingHandler()}>
                  <span>
                    {flexRender(
                      header.column.columnDef?.header,
                      header.getContext(),
                    )}
                  </span>
                  {header.column.getCanSort() && (
                    <span className="ml-2 text-md text-nowrap">
                      {header.column.getIsSorted() ? (
                        header.column.getIsSorted() === 'desc' ? (
                          <FaSortDown />
                        ) : (
                          <FaSortUp />
                        )
                      ) : (
                        <FaSort />
                      )}
                    </span>
                  )}
                </div>
              </Table.HeadCell>
            )),
          )}
        </Table.Head>
        <Table.Body className="bg-neutral-04 divide-y">
          {getRowModel().rows.map(row => (
            <Table.Row key={row.id}>
              {row.getVisibleCells().map(cell => (
                <Table.Cell key={cell.id} className="text-center">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </Table.Cell>
              ))}
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
      <ModalReportCard
        studyYearId={studyYearSelected}
        show={isUploadModalOpen}
        onClose={handleCloseUploadModal}
      />
    </>
  )
}