import React from "react";

export function TextInput(props) {
  return (
    <>
      <div className="form-floating">
        <input
          disabled={props.isSubmitting || props.rescode === 200}
          type={props.type}
          className={`form-control ${
            props.error && props.touched ? "is-invalid" : ""
          } ${!props.error && props.touched ? "is-valid" : ""}`}
          placeholder={props.placeholder}
          onChange={props.onChange}
          onBlur={props.onBlur}
          value={props.value}
        />
        <label>{props.label}</label>
      </div>
      {props.error && props.touched ? (
        <div className="invalid-feedback" style={{ display: "block" }}>
          {props.error}
        </div>
      ) : null}
    </>
  );
}

export function TextareaInput(props) {
  return (
    <>
      <div className="form-floating">
        <textarea
          disabled={props.isSubmitting || props.rescode === 200}
          style={{ height: "100px", resize: "none" }}
          className={`form-control ${
            props.error && props.touched ? "is-invalid" : ""
          } ${!props.error && props.touched ? "is-valid" : ""}`}
          placeholder={props.placeholder}
          onChange={props.onChange}
          onBlur={props.onBlur}
          value={props.value}
        />
        <label>{props.label}</label>
      </div>
      {props.error && props.touched ? (
        <div className="invalid-feedback" style={{ display: "block" }}>
          {props.error}
        </div>
      ) : null}
    </>
  );
}

export function SelectInput(props) {
  return (
    <>
      <div className="form-floating">
        <select
          disabled={props.isSubmitting || props.rescode === 200}
          onChange={props.onChange}
          onBlur={props.onBlur}
          className={`form-control ${
            props.error && props.touched ? "is-invalid" : ""
          } ${!props.error && props.touched ? "is-valid" : ""}`}
        >
          <option defaultValue></option>
          {props.options.map(function (option) {
            return (
              <option key={option} value={option}>
                {option}
              </option>
            );
          })}
        </select>
        <label>{props.label}</label>
      </div>
      {props.error && props.touched ? (
        <div className="invalid-feedback" style={{ display: "block" }}>
          {props.error}
        </div>
      ) : null}
    </>
  );
}

export function CheckInput(props) {
  return (
    <>
      <div className="form-check text-start">
        <input
          disabled={props.isSubmitting || props.rescode === 200}
          type={props.type || "checkbox"}
          className={`form-check-input ${
            props.error && props.touched ? "is-invalid" : ""
          } ${!props.error && props.touched ? "is-valid" : ""}`}
          onChange={props.onChange}
          onBlur={props.onBlur}
          value={props.value}
        />
        <label className="form-check-label">{props.label}</label>
      </div>
      {props.error && props.touched ? (
        <div className="invalid-feedback" style={{ display: "block" }}>
          {props.error}
        </div>
      ) : null}
    </>
  );
}