import React, { useState } from "react";
import { storiesOf } from "@storybook/react";
import Story from "../../storybook-components/Story";
import { FormGroup } from "../FormGroup";
import { Input } from "../Input";
import { InputFeedback } from "./InputFeedback";
import { Label } from "../Label";
import { STATUS_VARIANT } from "../../types";
import { Button, BUTTON_VARIANT } from "../Button";

const stories = storiesOf("Components/Forms/Input Feedback", module);

stories.add("Within FormGroup", () => {
  const [showFeedback, setShowFeedback] = useState(true);
  return (
    <Story title="InputFeedback">
      <Button
        className="mb-4"
        variant={BUTTON_VARIANT.UTILITY}
        onClick={() => setShowFeedback(!showFeedback)}
      >
        Toggle Feedback
      </Button>
      <FormGroup id="name1">
        <Label>Name</Label>
        <Input />
        {showFeedback && (
          <InputFeedback>I see what you did there</InputFeedback>
        )}
      </FormGroup>
      <FormGroup variant={STATUS_VARIANT.SUCCESS} id="name2">
        <Label>Name</Label>
        <Input />
        {showFeedback && (
          <InputFeedback>I see what you did there</InputFeedback>
        )}
      </FormGroup>
      <FormGroup variant={STATUS_VARIANT.WARNING} id="name3">
        <Label>Name</Label>
        <Input />
        {showFeedback && (
          <InputFeedback>I see what you did there</InputFeedback>
        )}
      </FormGroup>
      <FormGroup variant={STATUS_VARIANT.DANGER} id="name4">
        <Label>Name</Label>
        <Input />
        {showFeedback && (
          <InputFeedback>I see what you did there</InputFeedback>
        )}
      </FormGroup>
    </Story>
  );
});