import { Field, useFormikContext } from "formik";
import FormGroup from "../components/FormGroup";

const ChannelFields = () => {
  useFormikContext();

  return (
    <div className="flex flex-col space-y-2">
      <FormGroup>
        <label htmlFor="backoffice" className="m-0">
          Back Office URL
        </label>
        <Field
          name={"backOfficeURL"}
          type="text"
          id="backoffice"
          placeholder="https://www.backoffice.com"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="username">Username</label>
        <Field
          name={"username"}
          type="text"
          id="username"
          placeholder="Back office username"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="password">Password</label>
        <Field
          name={"password"}
          type="password"
          id="password"
          placeholder="Back office password"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="connectTimeoutSeconds">Connect Timeout Seconds</label>
        <Field
          name={"connectTimeoutSeconds"}
          type="number"
          id="connectTimeoutSeconds"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
      <FormGroup>
        <label htmlFor="readTimeoutSeconds">Read Timeout Seconds</label>
        <Field
          name={"readTimeoutSeconds"}
          type="number"
          id="readTimeoutSeconds"
          placeholder="https://example.com"
          className="p-1.5 border border-gray-400 rounded-lg"
        />
      </FormGroup>
    </div>
  );
};

export default ChannelFields;