import { DataColumn } from './DataColumn';
import './DataTable.css';

export type DataLabel = {
  group: null | string;
  label: string;
  value: string;
};

interface DataTableProps {
  values: string[];
  labels: DataLabel[];
  fileKeys: string[];
  fileData: string[][];
  // names,
  // onNameChange,
  handleTypeChange: React.ChangeEventHandler<HTMLSelectElement>;
  duplicate?: string;
  confirmed: boolean;
}

export const DataTable = ({
  values,
  labels,
  fileKeys,
  fileData,
  // names,
  // onNameChange,
  handleTypeChange,
  duplicate,
  confirmed,
}: DataTableProps) => {
  return (
    <div className="flex pseudoCenter">
      {fileKeys.map((key, i) => {
        const column = fileData[i];
        const typeValue = values[i];

        const focus = !duplicate && confirmed && Boolean(typeValue) === false;
        const isDuplicate = duplicate && typeValue === duplicate;
        const disabled = duplicate && !isDuplicate;

        return (
          <DataColumn
            index={i}
            name={key}
            data={column}
            labels={labels}
            typeValue={typeValue}
            onTypeChange={handleTypeChange}
            focus={Boolean(focus || isDuplicate)}
            disabled={Boolean(disabled)}
            key={i}
          />
        );
      })}
    </div>
  );
};