import * as React from "react";
import { Link } from "react-router-dom";

interface Props {
  settingField: string;
  settingValue: string;
  changedSettingsHook: object;
}

function handleSettingFieldChange(eventData, setFunction, changedSettingsHook, initialValue, settingField) {
  setFunction(eventData.target.value);
  if (eventData.target.value === initialValue) {
     let removeSettingObject = changedSettingsHook.changedSettings
     delete removeSettingObject[settingField];
     changedSettingsHook.setChangedSettings(() => ({...removeSettingObject})); 
  } else {
     changedSettingsHook.setChangedSettings(() => ({...changedSettingsHook.changedSettings, [settingField]: eventData.target.value}));
  }
}

export default function AccountDefaultSetting({
  settingField,
  settingValue,
  changedSettingsHook,
}: Props) {
  const initialValue = settingValue;
  const [fieldValue, setFieldValue] = React.useState(settingValue);
  return (
    <>
      <h4 key={settingField + "Header"}>{settingField + ":"}</h4>
      <input
        type="text"
        key={settingField + "Body"}
	name={settingField}
        value={fieldValue}
        onChange={(eventData) =>
          handleSettingFieldChange(eventData, setFieldValue, changedSettingsHook, initialValue, settingField)
        }
      ></input>
    </>
  );
}