---

import { Flex, InputText, Select } from 'exchange-elements/v2';
import { ChangeEventHandler, useState } from 'react';

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

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

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

interface IndicatorSettingsDraft {
  length: string;
  offset: string;
  source: MaSource;
}

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

function toIndicatorSettings(draft: IndicatorSettingsDraft): MaIndicatorSettings {
  const parsedLength = Number(draft.length);
  const parsedOffset = Number(draft.offset);

  return {
    length: Number.isFinite(parsedLength) && parsedLength > 0 ? parsedLength : 1,
    offset: Number.isFinite(parsedOffset) ? parsedOffset : 0,
    source: draft.source,
  };
}

export function IndicatorSettingsModal({ settings, onSettingsChange }: IndicatorSettingsModalProps) {
  const [draft, setDraft] = useState<IndicatorSettingsDraft>({
    length: String(settings.length),
    offset: String(settings.offset),
    source: settings.source,
  });

  const updateDraft = (nextDraft: IndicatorSettingsDraft): void => {
    setDraft(nextDraft);
    onSettingsChange?.(toIndicatorSettings(nextDraft));
  };

  const handleLengthChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    updateDraft({
      ...draft,
      length: event.currentTarget.value.replace(/[^\d]/g, ''),
    });
  };

  const handleOffsetChange: ChangeEventHandler<HTMLInputElement> = (event) => {
    updateDraft({
      ...draft,
      offset: event.currentTarget.value.replace(/[^\d-]/g, ''),
    });
  };

  const handleSourceChange = (nextSource: MaSource): void => {
    updateDraft({
      ...draft,
      source: nextSource,
    });
  };

  return (
    <Flex
      direction="column"
      divider={null}
      spacing="0500"
      wrap="nowrap"
    >
      <InputText
        className={styles.input}
        value={draft.length}
        onChange={handleLengthChange}
        label="Длина"
        labelPos="top"
        size="sm"
      />

      <Select
        classNames={{ dropdown: styles.dropdown, input: styles.input_wrapper }}
        value={draft.source}
        onChange={handleSourceChange}
        options={sourceOptions}
        label="Данные"
        labelPos="top"
        size="sm"
      />

      <InputText
        className={styles.input}
        value={draft.offset}
        onChange={handleOffsetChange}
        label="Отступ"
        labelPos="top"
        size="sm"
      />
    </Flex>
  );
}