Portal/rsconcept/frontend/src/dialogs/DlgEditReference/TabSyntacticReference.tsx

'use client';

import { useEffect, useLayoutEffect, useMemo, useState } from 'react';

import TextInput from '@/components/ui/TextInput';
import AnimateFade from '@/components/wrap/AnimateFade';
import { ReferenceType } from '@/models/language';
import { parseSyntacticReference } from '@/models/languageAPI';

import { IReferenceInputState } from './DlgEditReference';

interface TabSyntacticReferenceProps {
  initial: IReferenceInputState;
  setIsValid: React.Dispatch<React.SetStateAction<boolean>>;
  setReference: React.Dispatch<React.SetStateAction<string>>;
}

function TabSyntacticReference({ initial, setIsValid, setReference }: TabSyntacticReferenceProps) {
  const [nominal, setNominal] = useState('');
  const [offset, setOffset] = useState(1);

  const mainLink = useMemo(() => {
    const position = offset > 0 ? initial.basePosition + (offset - 1) : initial.basePosition + offset;
    if (offset === 0 || position < 0 || position >= initial.mainRefs.length) {
      return 'Некорректное значение смещения';
    } else {
      return initial.mainRefs[position];
    }
  }, [initial, offset]);

  useLayoutEffect(() => {
    if (initial.refRaw && initial.type === ReferenceType.SYNTACTIC) {
      const ref = parseSyntacticReference(initial.refRaw);
      setOffset(ref.offset);
      setNominal(ref.nominal);
    } else {
      setNominal(initial.text ?? '');
    }
  }, [initial]);

  useEffect(() => {
    setIsValid(nominal !== '' && offset !== 0);
    setReference(`@{${offset}|${nominal}}`);
  }, [nominal, offset, setIsValid, setReference]);

  return (
    <AnimateFade className='flex flex-col gap-2'>
      <TextInput
        id='dlg_reference_offset'
        type='number'
        dense
        label='Смещение'
        className='max-w-[10rem]'
        value={offset}
        onChange={event => setOffset(event.target.valueAsNumber)}
      />
      <TextInput
        id='dlg_main_ref'
        disabled // prettier: split lines
        dense
        noBorder
        label='Основная ссылка'
        value={mainLink}
      />
      <TextInput
        id='dlg_reference_nominal'
        spellCheck
        label='Начальная форма'
        placeholder='зависимое слово в начальной форме'
        value={nominal}
        onChange={event => setNominal(event.target.value)}
      />
    </AnimateFade>
  );
}

export default TabSyntacticReference;