web/apps/scandic-web/components/Blocks/Table/index.tsx

"use client"

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

import Table from "@scandic-hotels/design-system/Table"

import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"

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

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

export default function TableBlock({ data }: TableBlockProps) {
  const { columns, rows, totalWidth, heading, preamble } = 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,
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    cell: (info: any) => (
      <div dangerouslySetInnerHTML={{ __html: info.getValue() }} />
    ),
  }))
  const hasHeader = columns.some((col) => col.header)

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

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

  return (
    <Section>
      <SectionHeader preamble={preamble} heading={heading} />
      <div className={styles.tableWrapper}>
        <Table
          width={`${totalWidth}%`}
          variant="content"
          intent="striped"
          layout="fixed"
          borderRadius="none"
        >
          {hasHeader ? (
            <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>
          ) : null}

          <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>
        {showMoreVisible ? (
          <ShowMoreButton
            className={styles.showMoreButton}
            loadMoreData={handleShowMore}
            showLess={showLessVisible}
          />
        ) : null}
      </div>
    </Section>
  )
}