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

import ModalDeleteStudyYear from './ModalDeleteStudyYear'
import ModalEditStudyYear from './ModalEditStudyYear'
import { useStudyYearsTable } from './useStudyYearsTable'

const entriesNumberOptions = [
  { value: 10, label: 'Mostrar 10' },
  { value: 20, label: 'Mostrar 20' },
  { value: 50, label: 'Mostrar 50' },
]

export default function StudyYearsTable() {
  const {
    search,
    columns,
    pagination,
    data,
    setPageSize,
    setSearch,
    getHeaderGroups,
    getRowModel,
    getState,
    getPageCount,
    setPagination,
    isModalDeleteOpen,
    isModalEditOpen,
    handleCloseModalEdit,
    handleCloseModalDelete,
  } = useStudyYearsTable()

  return (
    <section>
      <div className="pb-4 flex items-center justify-end space-x-3">
        <Select
          defaultValue={entriesNumberOptions[0]}
          options={entriesNumberOptions}
          onChange={option => option && setPageSize(option?.value)}
        />

        <TextInput
          size={30}
          icon={FaSearch}
          placeholder="Buscar..."
          value={search}
          onChange={event => setSearch(event.target.value)}
        />
      </div>

      <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 className="text-nowrap">
                    {flexRender(
                      header.column.columnDef?.header,
                      header.getContext(),
                    )}
                  </span>
                  {header.column.getCanSort() && (
                    <span className="ml-2 text-md">
                      {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.length > 0 ? (
            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.Row>
              <Table.Cell colSpan={columns.length} className="text-center py-4">
                No hay datos disponibles.
              </Table.Cell>
            </Table.Row>
          )}
        </Table.Body>
      </Table>

      <div className="flex justify-end items-center space-x-3 sm:justify-center">
        <span className="text-slate-600">
          Página {getState().pagination.pageIndex + 1} de {getPageCount() + 1}
        </span>
        <Pagination
          currentPage={pagination.pageIndex + 1}
          totalPages={data?.totalPages || 1}
          onPageChange={page =>
            setPagination(prev => ({ ...prev, pageIndex: page - 1 }))
          }
          previousLabel="Anterior"
          nextLabel="Siguiente"
          showIcons
        />
      </div>

      <ModalDeleteStudyYear
        show={isModalDeleteOpen}
        onClose={handleCloseModalDelete}
      />
      <ModalEditStudyYear
        show={isModalEditOpen}
        onClose={handleCloseModalEdit}
      />
    </section>
  )
}