Function RenamingControl

components/settings/RenamingControl.tsx:21–328

({
  pattern,
  startSequence,
  onChange,
}: {
  pattern: string;
  startSequence: number;
  onChange: (p: string, s: number) => void;
})

 * Offers a "Simple Mode" (buttons) and an "Advanced Mode" (text pattern).
 */
export const RenamingControl = ({
  pattern,
  startSequence,
  onChange,
}: {
  pattern: string;
  startSequence: number;
  onChange: (p: string, s: number) => void;
}) => {
  // UI States: 'simple' | 'advanced'
  // 'simple' maps to predefined methods: original, number, prefix, suffix
  const [uiMode, setUiMode] = useState<'simple' | 'advanced'>('simple');

  // Simple Mode State
  const [method, setMethod] = useState<
    'original' | 'number' | 'prefix' | 'suffix'
  >('original');
  const [inputText, setInputText] = useState('');

  // Initialize state from prop on mount only
  // This allows the UI to reflect the current settings correctly.
  useEffect(() => {
    if (pattern === '{o}') {
      setMethod('original');
      setInputText('');
    } else if (pattern.match(/^.*-{n}$/)) {
      setMethod('number');
      setInputText(pattern.replace('-{n}', ''));
    } else if (pattern.match(/^.*-{o}$/)) {
      setMethod('prefix');
      setInputText(pattern.replace('-{o}', ''));
    } else if (pattern.match(/^{o}-.*$/)) {
      setMethod('suffix');
      setInputText(pattern.replace('{o}-', ''));
    } else {
      // Complex pattern detected (e.g. user manually typed one), switch to advanced mode
      setUiMode('advanced');
    }
  }, []);

  // When Simple Mode inputs change, calculate the new pattern and update parent
  useEffect(() => {
    if (uiMode !== 'simple') return;

    let newPattern = '{o}';
    const cleanText = inputText.trim();

    switch (method) {
      case 'original':
        newPattern = '{o}';
        break;
      case 'number':
        newPattern = `${cleanText || 'Image'}-{n}`;
        break;
      case 'prefix':
        newPattern = `${cleanText || 'Pre'}-{o}`;
        break;
      case 'suffix':