import { createSignal, mergeProps } from "solid-js";

function ValidatedTextInput(props) {
  props = mergeProps(
    { type: "text", valid: true, onInput: () => {}, errorText: "" },
    props
  );
  let [isActive, setActive] = createSignal(false);
  return (
    <div class={props.class}>
      <input
        type={props.type}
        class={
          "form-control" + (!isActive() || props.valid ? "" : " is-invalid")
        }
        id={props.id}
        value={props.value}
        onInput={props.onInput}
        onFocusOut={() => setActive(true)}
      />
      <div
        class={
          "invalid-feedback" +
          (!isActive() || props.valid ? " d-none" : " d-block")
        }
      >
        {props.errorText}
      </div>
    </div>
  );
}

export default ValidatedTextInput;
