import { useState } from "react";
import { Story, Preview, Props, Meta } from "@storybook/addon-docs/blocks";
import { FormGroup } from "./FormGroup";
import { Label } from "../Label";
import { Description } from "../Description";
import { Textarea } from "../Textarea";
import { Input } from "../Input";
import { InputFeedback } from "../InputFeedback";
import { Radio } from "../Radio";
import { Checkbox } from "../Checkbox";
import { Button } from "../Button";
import { Select } from "../Select";
import { STATUS_VARIANT } from "../../types";

<Meta title="Components/Forms/Form Group" component={FormGroup} />

# FormGroup

`FormGroup` is used to group `Label`, `Description`, and any input component to achieve a consistent layout.

```jsx
import { FormGroup } from "@aptible/arrow-ds";
```

<Preview>
  <Story name="FormGroup">
    <FormGroup id="notes">
      <Label>Notes</Label>
      <Description>Additional descriptor text, if needed.</Description>
      <Textarea rows={2} />
    </FormGroup>
  </Story>
</Preview>

## `FormGroup` Custom Props

These are the custom props that extend [`BoxProps`](/?path=/docs/components-box--box#box-custom-props). Full list of props <a href="#all-props">below</a>.

<Props of={FormGroup} />

## Demo

<Preview>
  <Story name="a">
    {() => {
      const [inputValue, setInputValue] = useState("");
      const [selectValue, setSelectValue] = useState(null);
      const [radioValue, setRadioValue] = useState(null);
      const [checkboxValues, setCheckboxValues] = useState({
        checkbox1: false,
        checkbox2: false,
      });
      const [inputIsError, setInputIsError] = useState(false);
      const [selectIsError, setSelectIsError] = useState(false);
      const [radioIsError, setRadioIsError] = useState(false);
      const [checkboxIsError, setCheckboxIsError] = useState(false);
      const options = [
        { value: "chocolate", label: "Chocolate" },
        { value: "strawberry", label: "Strawberry" },
        { value: "vanilla", label: "Vanilla" },
      ];
      const handleSubmit = (e) => {
        e.preventDefault();
        setInputIsError(!inputValue);
        setSelectIsError(!selectValue);
        setRadioIsError(!radioValue);
        setCheckboxIsError(
          Object.values(checkboxValues).every((val) => val === false),
        );
      };
      const handleInputChange = (e) => {
        const newVal = e.target.value;
        setInputValue(newVal);
        setInputIsError(!newVal);
      };
      const handleSelectChange = (newVal) => {
        setSelectValue(newVal);
        setSelectIsError(!newVal);
      };
      const handleRadioChange = (e) => {
        setRadioValue(e.target.value);
      };
      const handleCheckboxChange = (e) => {
        setCheckboxValues({
          ...checkboxValues,
          [e.target.id]: e.target.checked,
        });
      };
      return (
        <form onSubmit={handleSubmit}>
          <FormGroup
            id="first"
            isRequired
            variant={
              inputIsError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT
            }
          >
            <Label>First</Label>
            <Input
              type="text"
              value={inputValue}
              onChange={handleInputChange}
            />
            {inputIsError && (
              <InputFeedback>This one is required</InputFeedback>
            )}
          </FormGroup>
          <FormGroup id="second">
            <Label>Second</Label>
            <Description>
              I do not move down when the one above me has a feedback message
            </Description>
            <Input type="text" />
          </FormGroup>
          <FormGroup
            id="third"
            variant={
              selectIsError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT
            }
            isRequired
          >
            <Label>Third</Label>
            <Select
              isClearable
              options={options}
              defaultValue={selectValue}
              onChange={(selectedOption) => {
                if (!selectedOption) {
                  handleSelectChange(null);
                  return;
                }
                handleSelectChange(selectedOption.value);
              }}
            />
            {selectIsError && (
              <InputFeedback>This one is required too</InputFeedback>
            )}
          </FormGroup>
          <FormGroup
            variant={
              radioIsError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT
            }
            isRequired
          >
            <Label>Required Radios</Label>
            <Radio.Group>
              <Radio
                name="radio"
                label="Radio 1"
                value="one"
                checked={radioValue === "one"}
                onChange={handleRadioChange}
              />
              <Radio
                name="radio"
                label="Radio 2"
                value="two"
                checked={radioValue === "two"}
                onChange={handleRadioChange}
              />
            </Radio.Group>
            {radioIsError && (
              <InputFeedback>This one is required too</InputFeedback>
            )}
          </FormGroup>
          <FormGroup
            variant={
              checkboxIsError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT
            }
            isRequired
          >
            <Label>Required Checkbox group</Label>
            <Checkbox
              id="checkbox1"
              label="Checkbox 1"
              checked={checkboxValues.checkbox1}
              onChange={handleCheckboxChange}
            />
            <Checkbox
              id="checkbox2"
              label="Checkbox 2"
              checked={checkboxValues.checkbox2}
              onChange={handleCheckboxChange}
            />
            {checkboxIsError && (
              <InputFeedback>This one is required too</InputFeedback>
            )}
          </FormGroup>
          <Button type="submit">Submit</Button>
        </form>
      );
    }}
  </Story>
</Preview>