TimecodeInput

import { useState } from 'react';
import {
  TimecodeInput,
  type TimecodeInputFormatOptions,
  type TimecodeInputParseOptions,
  formatTimecodeInput,
  parseTimecodeInput,
} from '@techsquidtv/canvas-timeline-react/timecode-input';
import { fromSeconds, type RationalTime } from '@techsquidtv/canvas-timeline-utils';

const formatOptions = [
  { value: 'seconds', label: 'Seconds', formatOptions: { format: 'seconds' } },
  {
    value: 'frames-24',
    label: '24 fps',
    formatOptions: { format: 'frames', frameRate: 24 },
    parseOptions: { frameRate: 24 },
  },
] satisfies Array<{
  value: string;
  label: string;
  formatOptions: TimecodeInputFormatOptions;
  parseOptions?: TimecodeInputParseOptions;
}>;
const sequenceRate = 24000;
const initialSeconds = 3723.04;

function ClipStartInput({
  onApply,
}: {
  onApply: (time: RationalTime) => void;
}) {
  const [formatValue, setFormatValue] = useState('seconds');
  const [text, setText] = useState(() =>
    formatTimecodeInput(initialSeconds, { format: 'seconds' })
  );
  const selectedFormat =
    formatOptions.find((option) => option.value === formatValue) ?? formatOptions[0];
  const parsedSeconds = parseTimecodeInput(text, selectedFormat.parseOptions);

  function handleFormatChange(nextFormatValue: string) {
    const nextFormat = formatOptions.find((option) => option.value === nextFormatValue);
    const nextSeconds = parseTimecodeInput(text, selectedFormat.parseOptions);

    if (!nextFormat) {
      return;
    }

    setFormatValue(nextFormat.value);

    if (nextSeconds !== null) {
      setText(formatTimecodeInput(nextSeconds, nextFormat.formatOptions));
    }
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        if (parsedSeconds !== null) {
          onApply(fromSeconds(parsedSeconds, sequenceRate));
          setText(formatTimecodeInput(parsedSeconds, selectedFormat.formatOptions));
        }
      }}
    >
      <TimecodeInput
        aria-label="Clip start"
        value={text}
        invalid={parsedSeconds === null}
        onValueChange={setText}
      />
      <select
        aria-label="Timecode format"
        value={formatValue}
        onChange={(event) => handleFormatChange(event.currentTarget.value)}
      >
        {formatOptions.map((option) => (
          <option key={option.value} value={option.value}>
            {parsedSeconds === null
              ? option.label
              : `${option.label} (${formatTimecodeInput(parsedSeconds, {
                  ...option.formatOptions,
                })})`}
          </option>
        ))}
      </select>
      <button disabled={parsedSeconds === null} type="submit">
        Apply
      </button>
    </form>
  );
}