"use client"

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table"
import { useState } from "react"

import ScrollWrapper from "@/components/TempDesignSystem/ScrollWrapper"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import Table from "@/components/TempDesignSystem/Table"

import styles from "./table.module.css"

import type { TableProps } from "@/types/components/blocks/table"

export default function TableBlock({ data }: TableProps) {
  const { columns, rows, totalWidth } = data
  const initialPageSize = 5
  const [pageSize, setPageSize] = useState(initialPageSize)
  const showMoreVisible = rows.length > initialPageSize
  const showLessVisible = pageSize >= rows.length
  const columnDefs = columns.map((col) => ({
    accessorKey: col.id,
    header: col.header,
    size: col.width,
  }))

  const table = useReactTable({
    columns: columnDefs,
    data: rows,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state: {
      pagination: {
        pageIndex: 0,
        pageSize,
      },
    },
  })

  function handleShowMore() {
    setPageSize(showLessVisible ? initialPageSize : rows.length)
  }

  return (
    <div className={styles.tableWrapper}>
      <ScrollWrapper>
        <Table
          width={`${totalWidth}%`}
          variant="content"
          intent="striped"
          layout="fixed"
          borderRadius="none"
        >
          <Table.THead>
            {table.getHeaderGroups().map((headerGroup) => (
              <Table.TR key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <Table.TH
                    key={header.id}
                    width={`${header.column.columnDef.size}%`}
                  >
                    {flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
                  </Table.TH>
                ))}
              </Table.TR>
            ))}
          </Table.THead>
          <Table.TBody>
            {table.getRowModel().rows.map((row) => (
              <Table.TR key={row.id}>
                {row.getVisibleCells().map((cell) => (
                  <Table.TD key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </Table.TD>
                ))}
              </Table.TR>
            ))}
          </Table.TBody>
        </Table>
      </ScrollWrapper>
      {showMoreVisible ? (
        <ShowMoreButton
          loadMoreData={handleShowMore}
          showLess={showLessVisible}
          intent="table"
        />
      ) : null}
    </div>
  )
}