import { observer } from 'mobx-react-lite';
import React, { useState } from 'react';

import { GenerateFormStore } from '@/state/createStore';

const DevModeInputs = observer(
  ({
    state,
    setConfiguration,
  }: {
    state: GenerateFormStore;
    setConfiguration: (field: string, value: any) => void;
  }) => {
    const [inputValues, setInputValues] = useState(state.configurations);

    const handleInputChange = (field: string, value: string) => {
      setInputValues((prevValues: any) => ({
        ...prevValues,
        [field]: value,
      }));
    };

    const handleInputBlur = (field: string, value: string) => {
      if (value.trim() === '') {
        setInputValues((prevValues: any) => {
          const newValues = { ...prevValues };
          delete newValues[field];
          return newValues;
        });
        setConfiguration(field, null);
        return;
      }
      setConfiguration(field, value.trim());
    };

    return (
      <div className='font-sans'>
        <div className='flex flex-row flex-wrap gap-2 pt-2'>
          {Object.keys(state.getAdvancedParams() || {}).map((key: string) => (
            <input
              key={key}
              className='w-[134px] rounded-lg border border-quaternary bg-tertiary p-2 font-sans text-sm text-primary'
              placeholder={key}
              value={inputValues[key] || ''}
              onChange={(e) => handleInputChange(key, e.target.value)}
              onBlur={(e) => handleInputBlur(key, e.target.value)}
            />
          ))}
        </div>
      </div>
    );
  }
);

export default DevModeInputs;