'use client';

import { TableRow, TableCell } from '@/components/ui/table';
import { IColumnConfig, UnknownRecord } from '@/types';

interface ITableRowsProps {
  records: UnknownRecord[];
  columns: IColumnConfig[];
  currentPage: number;
  recordsPerPage: number;
  activeRow: string | number;
  handleRowClick: (
    e: React.MouseEvent<HTMLTableRowElement>,
    record: UnknownRecord,
  ) => void;
  columnsDecorator: (item: UnknownRecord, key: string) => string;
  isExpanded: (id: string | number, columnKey: string) => boolean;
  toggleExpand: (
    e: React.MouseEvent<HTMLButtonElement>,
    id: string | number,
    columnKey: string,
  ) => void;
  getTruncatedText: (text: string, wordLimit: number) => string;
  primaryId: number | string;
}

export const TableRows = ({
  records,
  columns,
  currentPage,
  recordsPerPage,
  activeRow,
  handleRowClick,
  columnsDecorator,
  isExpanded,
  toggleExpand,
  getTruncatedText,
  primaryId,
}: ITableRowsProps) => {
  return (
    <>
      {records.map((item, index) => {
        const serialNumber = (currentPage - 1) * recordsPerPage + index + 1;

        return (
          <TableRow
            key={item[primaryId] ?? index}
            onClick={(e) => handleRowClick(e, item)}
            className={`cursor-pointer transition-colors ${
              activeRow === item.course_id ? 'bg-muted' : ''
            }`}
          >
            <TableCell className="addwidth">{serialNumber}.</TableCell>
            {columns.map((column) => {
              if (column.is_checked !== 'true') return null;

              const rawText = String(columnsDecorator(item, column.key) ?? '');
              const words = rawText.trim().split(/\s+/);
              const needsToggle = words.length > 10;
              const expanded = isExpanded(item[primaryId], column.key);
              const displayText = expanded
                ? rawText
                : getTruncatedText(rawText, 10);

              return (
                <TableCell
                  key={column.key}
                  className={`addwidth ${needsToggle && expanded ? 'width-400' : ''}`}
                >
                  <span className="toggle-read">
                    {displayText}
                    {needsToggle && !expanded && (
                      <button
                        className="ml-1 underline text-blue-600 text-xs"
                        onClick={(e) =>
                          toggleExpand(e, item.course_id, column.key)
                        }
                      >
                        <span>...</span>
                        <span className="underline"> More</span>
                      </button>
                    )}
                    {needsToggle && expanded && (
                      <button
                        className="ml-2 underline text-blue-600 text-xs"
                        onClick={(e) =>
                          toggleExpand(e, item[primaryId], column.key)
                        }
                      >
                        <span className="underline">Less</span>
                      </button>
                    )}
                  </span>
                </TableCell>
              );
            })}
          </TableRow>
        );
      })}
    </>
  );
};