import { checkMultiplicity } from 'nmr-processing';

import { useDispatch } from '../../../context/DispatchContext.js';
import { EditableColumn } from '../../../elements/EditableColumn.js';
import { formatNumber } from '../../../utility/formatNumber.js';
import type { RangeColumnProps } from '../RangesTableRow.js';

function SignalDeltaColumn({
  row,
  onHover,
  format,
  rowSpanTags,
}: RangeColumnProps) {
  const dispatch = useDispatch();
  const signal = row?.tableMetaInfo?.signal;

  function saveHandler(event: any) {
    dispatch({
      type: 'CHANGE_RANGE_SIGNAL_VALUE',
      payload: {
        value: event.target.value,
        rangeId: row.id,
        signalId: signal.id,
      },
    });
  }

  const rangeText = `${formatNumber(row.from, format)} - ${formatNumber(
    row.to,
    format,
  )}`;

  if (!signal || !checkMultiplicity(signal.multiplicity, ['m'])) {
    return (
      <td {...rowSpanTags} {...onHover}>
        {rangeText}
      </td>
    );
  }

  return (
    <td {...rowSpanTags} {...onHover}>
      <EditableColumn
        value={formatNumber(signal.delta, format)}
        onSave={saveHandler}
        type="number"
        style={{ padding: '0.1rem 0.4rem' }}
        validate={(val) => val !== ''}
      />
    </td>
  );
}

export default SignalDeltaColumn;