---

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>
  );
};




import { useEffect, useState } from 'react';

import { ColorField, NumberField, SelectField, TextAreaField, TextField } from '@src/components/FormFields';
import { DrawingStyleField, DrawingStyleSettings } from '@src/core/Drawings/types';

interface DrawingStyleSettingsModalProps {
  fields: DrawingStyleField[];
  values: DrawingStyleSettings;
  onChange: (settings: DrawingStyleSettings) => void;
}

export const DrawingStyleSettingsModal = ({ fields, values, onChange }: DrawingStyleSettingsModalProps) => {
  const [form, setForm] = useState<DrawingStyleSettings>(values);

  useEffect(() => {
    setForm(values);
  }, [values]);

  const changeValue = (key: string, value: string | number | boolean) => {
    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);
              }}
            />
          );
        }

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

        if (field.type === 'text') {
          return (
            <TextField
              key={field.key}
              label={field.label}
              value={String(value)}
              placeholder={field.placeholder}
              onValueChange={(nextValue) => {
                changeValue(field.key, nextValue);
              }}
            />
          );
        }

        if (field.type === 'textarea') {
          return (
            <TextAreaField
              key={field.key}
              label={field.label}
              value={String(value)}
              placeholder={field.placeholder}
              onValueChange={(nextValue) => {
                changeValue(field.key, nextValue);
              }}
            />
          );
        }

        // if (field.type === 'boolean') {
        //   return (
        //     <label
        //       key={field.key}
        //       className={styles.checkboxField}
        //     >
        //       <input
        //         type="checkbox"
        //         checked={Boolean(value)}
        //         onChange={(event) => {
        //           changeValue(field.key, event.target.checked);
        //         }}
        //       />
        //       <span>{field.label}</span>
        //     </label>
        //   );
        // }

        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>
  );
};