import { useState } from 'react';
import { action } from '@storybook/addon-actions';
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { Box } from '../Box/Box';
import { CategoryFilter } from './CategoryFilter';

<Meta title="Components/CategoryFilter/Overview" component={CategoryFilter} />

# CategoryFilter

The CategoryFilter component consists of a button with text, typically used in a design to display high level categories on page.

## Usage Guidelines

- Should appear in a group of a related choices
- Can be used to denote for single (e.g. t-shirt sizes) or multiple choice (e.g. blog categories) scenarios

## Content Guidelines

- A single word is preferred when categorizing content. For example, "Solar" or "Storage"
- Limit the number of words within a badge to two. For example, "Company News" or "Smart Home"

<Canvas isExpanded>
  <Story
    name="Default"
    parameters={{
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/k1kOsplTGXvSSMQQCzhCND/Palmetto-Design-System?node-id=1294%3A20507',
      },
    }}
  >
    {() => {
      const [isSelected, setIsSelected] = useState({
        chocolate: false,
        vanilla: true,
        strawberry: false,
      });
      const handleSelect = selectedKey => {
        setIsSelected(prevIsSelected => ({
          ...prevIsSelected,
          [selectedKey]: !prevIsSelected[selectedKey],
        }));
      };
      return (
        <Box direction="row" gap="xs">
          <CategoryFilter
            isSelected={isSelected.chocolate}
            onClick={() => handleSelect('chocolate')}
          >
            chocolate
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.vanilla}
            onClick={() => handleSelect('vanilla')}
          >
            vanilla
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.strawberry}
            onClick={() => handleSelect('strawberry')}
          >
            strawberry
          </CategoryFilter>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Props

<ArgsTable of={CategoryFilter} />

## Sizes

The CategoryFilter can be sized with one of `xs`, `sm`, `md`, `lg`, or a `ResponsiveProp` object with any of those values.

<Canvas isExpanded>
  <Story name="Sizes">
    {() => {
      const [isSelected, setIsSelected] = useState({
        xs: false,
        sm: false,
        md: false,
        lg: false,
        responsive: false,
      });
      const handleSelect = selectedKey => {
        setIsSelected(prevIsSelected => ({
          ...prevIsSelected,
          [selectedKey]: !prevIsSelected[selectedKey],
        }));
      };
      return (
        <Box direction="row" gap="sm" wrap>
          <CategoryFilter
            isSelected={isSelected.xs}
            onClick={() => handleSelect('xs')}
            size="xs"
          >
            Extra Small
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.sm}
            onClick={() => handleSelect('sm')}
            size="sm"
          >
            Small
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.md}
            onClick={() => handleSelect('md')}
            size="md"
          >
            Medium
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.lg}
            onClick={() => handleSelect('lg')}
            size="lg"
          >
            Large
          </CategoryFilter>
          <CategoryFilter
            isSelected={isSelected.responsive}
            onClick={() => handleSelect('responsive')}
            size={{ base: 'xs', tablet: 'sm', desktop: 'md', hd: 'lg' }}
          >
            Responsive
          </CategoryFilter>
        </Box>
      );
    }}
  </Story>
</Canvas>

## Disabled

Use the disabled prop to indicate the button is not clickable in its currenty state.

<Canvas isExpanded>
  <Story name="Disabled">
    {() => {
      const [isSelected, setSelected] = useState(false);
      return (
        <Box direction="row" gap="sm">
          <CategoryFilter isSelected={false} isDisabled>
            Unselected
          </CategoryFilter>
          <CategoryFilter isSelected={true} isDisabled>
            Selected
          </CategoryFilter>
        </Box>
      );
    }}
  </Story>
</Canvas>
