---

import { ChangeEventHandler, useRef } from 'react';
import { Flex } from 'exchange-elements/v2';

import { MaIndicatorSettings, MaSource } from '@src/core/Indicators/settings';

import styles from './index.module.scss';

interface IndicatorSettingsModalProps {
  initialSettings: MaIndicatorSettings;
  onSettingsChange?: (settings: MaIndicatorSettings) => void;
}

const sourceOptions: { label: string; value: MaSource }[] = [
  { label: 'Цена открытия', value: 'open' },
  { label: 'Максимум', value: 'high' },
  { label: 'Минимум', value: 'low' },
  { label: 'Цена закрытия', value: 'close' },
];

export function IndicatorSettingsModal({
  initialSettings,
  onSettingsChange,
}: IndicatorSettingsModalProps) {
  const draftSettingsRef = useRef<MaIndicatorSettings>({ ...initialSettings });

  const updateDraftSettings = (patch: Partial<MaIndicatorSettings>): void => {
    draftSettingsRef.current = {
      ...draftSettingsRef.current,
      ...patch,
    };

    onSettingsChange?.({ ...draftSettingsRef.current });
  };

  const handleLengthChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    const normalizedValue = event.currentTarget.value.replace(/[^\d]/g, '');
    const nextLength = Number(normalizedValue);

    updateDraftSettings({
      length: Number.isFinite(nextLength) && nextLength > 0 ? nextLength : 1,
    });
  };

  const handleOffsetChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    const normalizedValue = event.currentTarget.value.replace(/[^\d-]/g, '');
    const nextOffset = Number(normalizedValue);

    updateDraftSettings({
      offset: Number.isFinite(nextOffset) ? nextOffset : 0,
    });
  };

  const handleSourceChange: ChangeEventHandler<HTMLSelectElement> = (event) => {
    updateDraftSettings({
      source: event.currentTarget.value as MaSource,
    });
  };

  return (
    <Flex
      direction="column"
      divider={null}
      spacing="0500"
      wrap="nowrap"
    >
      <label className={styles.field}>
        <span className={styles.label}>Длина</span>
        <input
          className={styles.input}
          type="text"
          defaultValue={String(initialSettings.length)}
          onChange={handleLengthChange}
        />
      </label>

      <label className={styles.field}>
        <span className={styles.label}>Данные</span>
        <select
          className={styles.select}
          defaultValue={initialSettings.source}
          onChange={handleSourceChange}
        >
          {sourceOptions.map((option) => (
            <option
              key={option.value}
              value={option.value}
            >
              {option.label}
            </option>
          ))}
        </select>
      </label>

      <label className={styles.field}>
        <span className={styles.label}>Отступ</span>
        <input
          className={styles.input}
          type="text"
          defaultValue={String(initialSettings.offset)}
          onChange={handleOffsetChange}
        />
      </label>
    </Flex>
  );
}