---

import { useEffect, useState } from 'react';

import { NumberField, SelectField } 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);

  useEffect(() => {
    setForm(values);
  }, [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 (
          <NumberField
            key={field.key}
            label={field.label}
            value={typeof value === 'number' ? value : field.defaultValue}
            min={field.min}
            max={field.max}
            onValueChange={(nextValue) => {
              changeValue(field.key, nextValue);
            }}
          />
        );
      })}
    </div>
  );
};