import { useState } from "react";
import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
import { THEME, STATUS_VARIANT } from "../../types";
import { ThemeContext } from "../../contexts/theme";
import { Input } from "../../components/Input";
import { Button } from "../../components/Button";
import { Textarea } from "../../components/Textarea";
import { FormGroup } from "../../components/FormGroup";
import { Description } from "../../components/Description";
import { InputFeedback } from "../../components/InputFeedback";
import { Label } from "../../components/Label";

export const decorators = [
  (storyFn) => <div className="p-8 bg-gray-800">{storyFn()}</div>,
];

<Meta
  title="Components/Forms/Form Group (Branded)"
  component={Input}
  decorators={decorators}
/>

# Brand Form Group

The [`FormGroup`](/?path=/docs/components-formgroup--formgroup) component is also available in a `brand` theme variant. `FormGroup` will act as a `ThemeContext.Provider` to its children, providing the brand theme to its `Labels`, `Descriptions`, and inputs. If a `FormGroup` itself is within a `ThemeContext.Provider`, it will automatically use that as its `theme`. To override this, provide a value to the `FormGroups`'s `theme` prop.

<Preview>
  <Story name="FormGroup">
    <FormGroup theme={THEME.BRAND}>
      <Label>Label</Label>
      <Description>Additional descriptor text, if needed.</Description>
      <Textarea rows={2} />
    </FormGroup>
  </Story>
</Preview>

## Demos

### Required

<Preview>
  <Story name="Required">
    {() => {
      const [inputValue, setInputValue] = useState("");
      const [isError, setIsError] = useState(false);
      const handleInputChange = (e) => {
        const newVal = e.target.value;
        setInputValue(newVal);
      };
      const handleSubmit = (e) => {
        e.preventDefault();
        setIsError(!inputValue);
      };
      return (
        <ThemeContext.Provider value={THEME.BRAND}>
          <form onSubmit={handleSubmit}>
            <FormGroup
              isRequired
              variant={isError ? STATUS_VARIANT.DANGER : STATUS_VARIANT.DEFAULT}
            >
              <Label>Label</Label>
              <Description>Additional descriptor text, if needed.</Description>
              <Textarea
                rows={2}
                value={inputValue}
                onChange={handleInputChange}
              />
              {isError && <InputFeedback>This field is required</InputFeedback>}
            </FormGroup>
            <Button type="submit">Submit</Button>
          </form>
        </ThemeContext.Provider>
      );
    }}
  </Story>
</Preview>