import ColorPicker from "../ColorPicker";
import { ArgsTable, Canvas, Meta, Story } from "@storybook/addon-docs";
import { createStoryMetaSettings } from "../../../storybook";
import {
  colorPickerCircleShapeTemplate,
  colorPickerNoColorTemplate,
  colorPickerSelectedIconTemplate,
  colorPickerSelectedTemplate,
  colorPickerTemplate,
  colorPickerTextIndicatorTemplate,
  colorPickerWithIndicatorTemplate
} from "./ColorPicker.stories";
import { multiSelectionInteractionSuite, noColorInteractionSuite } from "../__tests__/ColorPicker.interactions.js";

export const metaSettings = createStoryMetaSettings({
  component: ColorPicker,
  enumPropNamesArray: ["colorStyle", "colorSize", "colorShape"],
  iconPropNamesArray: ["ColorIndicatorIcon", "SelectedIndicatorIcon", "NoColorIcon"],
  actionPropsArray: [{ name: "onSave", linkedToPropValue: "value" }]
});

<Meta
  title="Pickers/ColorPicker - (Coming Soon)"
  component={ColorPicker}
  argTypes={metaSettings.argTypes}
  decorators={metaSettings.decorators}
/>

<!--- Component documentation -->

# ColorPicker

- [Overview](#overview)
- [Props](#props)
- [Variants](#variants)
- [Feedback](#feedback)

## Overview

ColorPicker is our component for selecting our content colors

<Canvas>
  <Story name="Overview">{colorPickerTemplate.bind({})}</Story>
</Canvas>

## Props

<ArgsTable of={ColorPicker} />

## Variants

### With Indicator

<Canvas>
  <Story name="With Indicator">{colorPickerWithIndicatorTemplate.bind({})}</Story>
</Canvas>

### Text Indication

<Canvas>
  <Story name="Text Indication">{colorPickerTextIndicatorTemplate.bind({})}</Story>
</Canvas>

### Selected

<Canvas>
  <Story name="Selected">{colorPickerSelectedTemplate.bind({})}</Story>
</Canvas>

### No color

Ability to revert to initial color

<Canvas>
  <Story name="No color" play={noColorInteractionSuite}>
    {colorPickerNoColorTemplate.bind({})}
  </Story>
</Canvas>

### Selected icon

Selected colors indication, when using multi-selection

<Canvas>
  <Story name="Selected icon" play={multiSelectionInteractionSuite}>
    {colorPickerSelectedIconTemplate.bind({})}
  </Story>
</Canvas>

### Shapes

The `ColorPicker` supports multiple shapes

<Canvas>
  <Story name="Shapes">{colorPickerCircleShapeTemplate.bind({})}</Story>
</Canvas>
