import React from 'react';

import { BuilderModule, Prop } from '../../../@types/settings.js';

import './CtrlText.scss';

type ControlProps = {
  updateProps: (id: string, path: string, value: any) => void;
  deleteProp: (path: string) => void;
  currMod: BuilderModule;
  updatePath: string;
  prop: Prop;
  value: any;
  inheritVal?: boolean;
};

export default function CtrlText({
  currMod,
  updatePath,
  prop,
  value,
  inheritVal,
  deleteProp,
  updateProps,
}: ControlProps) {
  return (
    <input
      key={currMod.id + updatePath}
      className='ctrl-text__input-field '
      type='text'
      placeholder={inheritVal ? value : ''}
      value={inheritVal ? '' : value}
      onChange={(e) => {
        if (e.target.value && e.target.value.trim().length > 0) {
          updateProps(currMod.id, updatePath, e.target.value);
          return;
        }
        deleteProp(updatePath);
      }}
    />
  );
}
