import * as React from 'react';
import { Checkbox } from '@fluentui/react';
import styles from './Step1SelectPositions.module.scss';
import { PurchaseRequestDetail } from '../types/domain';
import { UseStep1SelectionResult } from './useStep1Selection';

interface RequestLinesProps {
  detail: PurchaseRequestDetail;
  selection: UseStep1SelectionResult;
  disabled?: boolean; // форма только для чтения
}

// Позиции (строки) заявки: таблица с чекбоксами. То, что попадёт в СТ.
// Цены на Шаге 1 не показываем — они появятся на Шагах 2–3 (КП/сравнение).
export function RequestLines({ detail, selection, disabled }: RequestLinesProps): JSX.Element {
  return (
    <div className={styles.lines}>
      <div className={`${styles.lineRow} ${styles.lineHead}`}>
        <span />
        <span>№</span>
        <span>Код</span>
        <span>Наименование</span>
        <span>Кат. №</span>
        <span>Кол-во</span>
        <span>Ед. изм.</span>
      </div>

      {detail.lines.map((line) => (
        <div key={line.id} className={styles.lineRow}>
          <Checkbox
            checked={selection.selectedIds.has(line.id)}
            onChange={() => selection.toggleLine(detail, line)}
            disabled={disabled}
          />
          <span>{line.lineNo}</span>
          <span>{line.code || '—'}</span>
          <span className={styles.lineName}>{line.name}</span>
          <span>{line.catalogNumber || '—'}</span>
          <span>{line.quantity}</span>
          <span>{line.unit}</span>
        </div>
      ))}
    </div>
  );
}