---

import { useState } from 'react';

import { SelectField, TextField } from '@src/components/FormFields';
import { IndicatorSetting, IndicatorSettings } from '@src/types';

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

interface IndicatorSettingsModalProps {
  fields: IndicatorSetting[];
  values: IndicatorSettings;
  onChange: (settings: IndicatorSettings) => void;
}

export const IndicatorSettingsModal = ({ fields, values, onChange }: IndicatorSettingsModalProps) => {
  const [form, setForm] = useState<IndicatorSettings>(values);

  const changeValue = (key: string, value: string | number) => {
    setForm((current) => {
      const next = {
        ...current,
        [key]: value,
      };

      onChange(next);

      return next;
    });
  };

  return (
    <div className={styles.form}>
      {fields.map((field) => {
        const value = form[field.key] ?? field.defaultValue;

        if (field.type === 'select') {
          return (
            <SelectField
              key={field.key}
              label={field.label}
              value={String(value)}
              options={field.options}
              onValueChange={(nextValue) => {
                changeValue(field.key, nextValue);
              }}
            />
          );
        }

        return (
          <TextField
            key={field.key}
            label={field.label}
            value={String(value)}
            normalizeValue={(nextValue) => normalizeNumberValue(nextValue, field.allowNegative)}
            onValueChange={(nextValue) => {
              changeValue(field.key, getNumberValue(nextValue, field.defaultValue));
            }}
          />
        );
      })}
    </div>
  );
};

function normalizeNumberValue(value: string, allowNegative?: boolean): string {
  const availableChars = allowNegative ? /[^\d-]/g : /\D/g;

  return value.replace(availableChars, '');
}

function getNumberValue(value: string, defaultValue: number): number {
  if (value === '' || value === '-') {
    return defaultValue;
  }

  const nextValue = Number(value);

  return Number.isNaN(nextValue) ? defaultValue : nextValue;
}