'use client';

import * as React from 'react';
import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
import { UnknownRecord } from '@/types';
import { VC_STUDENTS_DURATION } from '@/constants';
import { HistorySetTable } from './HistorySetTable';

export function HistoryApplicableOnSetTable({
  applicableSets,
  selector,
}: {
  applicableSets: UnknownRecord[];
  selector: string;
}) {
  const setsKey =
    selector === 'current' ? 'sets' : 'vcm_commission_contract_sets';
  return (
    <div className="w-full">
      {applicableSets.map((applicableSet: UnknownRecord, setIndex: number) => (
        <div
          className="overflow-hidden rounded-md border mb-6"
          key={`${selector}-${setIndex}`}
        >
          <Table>
            <TableBody>
              {[
                {
                  label: 'Students Per:',
                  value:
                    VC_STUDENTS_DURATION.find(
                      (item) =>
                        String(item.id) === String(applicableSet.students_per),
                    )?.name || 'N/A',
                },
                {
                  label: 'No of Commission Instance:',
                  value: applicableSet.no_of_instances,
                },
                { label: 'Campus:', value: applicableSet.applicable_campuses },
                {
                  label: 'Study Level:',
                  value: applicableSet.applicable_study_levels,
                },
                {
                  label: 'Study Level Courses:',
                  value: applicableSet.applicable_courses,
                },
              ].map((row, index) => (
                <TableRow key={`${selector}-${index}`}>
                  <TableCell>{row.label}</TableCell>
                  <TableCell>{row.value as React.ReactNode}</TableCell>
                </TableRow>
              ))}
              <TableRow>
                <TableCell>Sets</TableCell>
                <TableCell>
                  <HistorySetTable
                    sets={applicableSet[setsKey]}
                    selector={selector}
                  />
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      ))}
    </div>
  );
}