---

import { ChangeEvent, useState } from 'react';

import { Button, SelectField, TextField } from 'exchange-elements/v2';

import { IndicatorSetting, IndicatorSettings } from '@src/types';

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

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

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

  return (
    <div>
      {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}
              onChange={(nextValue: string) => {
                changeValue(field.key, nextValue);
              }}
            />
          );
        }

        return (
          <TextField
            key={field.key}
            label={field.label}
            type="number"
            value={String(value)}
            min={field.min}
            max={field.max}
            onChange={(event: ChangeEvent<HTMLInputElement>) => {
              changeValue(field.key, Number(event.target.value));
            }}
          />
        );
      })}

      <div>
        <Button
          label="Отмена"
          onClick={onCancel}
        />

        <Button
          label="Сохранить"
          onClick={() => {
            onSave(form);
          }}
        />
      </div>
    </div>
  );
};