import { Meta, Preview, Props, Story } from "@storybook/addon-docs/blocks";
import { useState } from "react";
import { StatusPanel } from "./StatusPanel";
import { Checkbox } from "../Checkbox";
import { ArrowLink } from "../ArrowLink";
import { SmallCaps } from "../SmallCaps";
import { Text } from "../Text";
import { Stack } from "../Stack";
import { STATUS_VARIANT, ORIENTATION } from "../../types";
import { EnumTable } from "../../storybook-components/EnumTable";
import { capitalize } from "../../utilities/strings";

<Meta title="Components/Data/Status Panel" component={StatusPanel} />

# StatusPanel

The StatusPanel is a container styled with an accent border that can be used to indicate status of its content.

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

export const variants = Object.values(STATUS_VARIANT);

<Preview>
  <Story name="StatusPanel">
    <StatusPanel />
  </Story>
</Preview>

## Custom Props

These are the custom props that extend `BoxProps>`. Full list of props <a href="#all-props">below</a>.

<Props of={StatusPanel} />
<EnumTable enums={{ STATUS_VARIANT }} />

## Demos

### Status Variants

<Preview>
  <Story name="Status Variants">
    <Stack orientation={ORIENTATION.VERTICAL}>
      {variants.map((variant) => (
        <StatusPanel key={variant} variant={variant} />
      ))}
    </Stack>
  </Story>
</Preview>

### Hoverable

<Preview>
  <Story name="Hoverable">
    <Stack orientation={ORIENTATION.VERTICAL}>
      {variants.map((variant) => (
        <StatusPanel hoverable key={variant} variant={variant} />
      ))}
    </Stack>
  </Story>
</Preview>

### Clickable Children

export const InteractiveCheckbox = ({ label, ...rest }) => {
  const [checked, setChecked] = useState(false);
  const handleCheckboxClick = () => {
    setChecked(!checked);
  };
  return (
    <Checkbox
      onClick={handleCheckboxClick}
      checked={checked}
      {...rest}
      label={label}
    />
  );
};

<Preview>
  <Story name="ClickableChildren">
    <Stack orientation={ORIENTATION.VERTICAL}>
      {variants.map((variant) => (
        <StatusPanel key={variant} variant={variant} hoverable>
          <label className="self-stretch flex-grow flex items-center px-2 cursor-pointer">
            <InteractiveCheckbox className="mr-2" />
            <SmallCaps className="w-14" variant={variant}>
              {variant}
            </SmallCaps>
            <Text className="font-medium" variant={variant}>
              {capitalize(variant)}
            </Text>
          </label>
          <ArrowLink
            className="self-stretch flex-no-grow px-2"
            onClick={() => console.log("link clicked")}
          >
            A link
          </ArrowLink>
        </StatusPanel>
      ))}
    </Stack>
  </Story>
</Preview>

## All Props

<Props of={StatusPanel} />