import React from "react";
import { Input, Button, File } from "../../";

const renderInputAppendButton = () => {
  return <Button variant="info">Button</Button>;
};

export default (
  <div>
    <div className="m-5">
      <Input className="my-class-name" name="1" value="100" onChange={() => {}} onBlur={() => {}} />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName2"
        value="100"
        label="My label"
        onChange={() => {}}
        error="Your input is not valid!"
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName3"
        value="100"
        label="My label for readOnly input"
        onChange={() => {}}
        readOnly
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName4"
        value="100"
        label="My label for disabled input"
        onChange={() => {}}
        disabled
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName11"
        value="100"
        label="My label for disabled input with disabled reason"
        disabledReason="This is disabled reason"
        onChange={() => {}}
        disabled
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName5"
        value="100"
        label="My label for input with help"
        onChange={() => {}}
        help="Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces"
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName6"
        value=""
        label="My label for required input"
        onChange={() => {}}
        required
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName7"
        inputPrepend="@"
        value=""
        label="My label for input with prepend"
        onChange={() => {}}
        required
      />
    </div>
    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName8"
        inputAppend={renderInputAppendButton()}
        value=""
        label="My label for input with append"
        onChange={() => {}}
        required
      />
    </div>
    <div className="m-5">
      <File
        className="my-class-name"
        name="inputName9"
        value=""
        label="My file label"
        onChange={() => {}}
        required
      />
    </div>

    <div className="m-5">
      <Input
        className="my-class-name"
        name="inputName10"
        value="test"
        label="Password"
        onChange={() => {}}
        type="password"
        toggleVisibility={true}
        required
      />
    </div>
  </div>
);