import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
import { boolean, number, text, select } from '@storybook/addon-knobs'
import { getColor } from '../../styles/utilities/color'
import CheckMarkCard from './CheckMarkCard'
import { Avatar, ChoiceGroup } from '../index'
import AvatarSpec from '../../utilities/specs/avatar.specs'

<Meta
  title="Components/Forms/CheckMarkCard"
  component={CheckMarkCard}
  parameters={{
    design: {
      type: 'figma',
      url:
        'https://www.figma.com/file/Wp9mDxTvWicSTWtezj2ImkMP/HSDS-Product?node-id=5015%3A49',
    },
  }}
/>

# CheckMarkCard

This component provides richer context to the of the default HTML `<input>` of type `checkbox`.

<Canvas>
  <Story name="default">
    <div>
      <CheckMarkCard label="Derek" value="derek"></CheckMarkCard>
      <br />
      <CheckMarkCard
        label="Hansel"
        value="hansel"
        disabled={boolean('disabled', true)}
        showHeading={false}
      ></CheckMarkCard>
      <br />
      <CheckMarkCard
        label="Matilda"
        value="matilda"
        checked={boolean('checked', true)}
      ></CheckMarkCard>
      <br />
      <CheckMarkCard
        label="Mugatu"
        value="mugatu"
        status="locked"
        iconName="lock-closed"
        iconSize="20"
        markColor="lavender"
        tooltipText="This is locked, leave it alone"
      ></CheckMarkCard>
    </div>
  </Story>
</Canvas>

#### Reference

- **Designer**: Buzz
- **Engineering**: Juan Pablo
- **Usage**: Beacon, Mailbox Permissions

<br />
<br />

### Props

<ArgsTable of={CheckMarkCard} />

## Stories

#### Inside a group with selection limits

<Canvas>
  <Story name="inside group">
    <CheckMarkCard.Grid
      isResponsive
      value={['matilda']}
      choiceMaxWidth="170px"
      choiceHeight="160px"
      multiSelectLimit={number('multiSelectLimit', 2)}
      onChange={value => {
        console.log(`onChange(selectedValue: ${value.toString()})`)
      }}
      multiSelect={boolean('multiSelect', true)}
    >
      <CheckMarkCard
        label="Derek"
        value="derek"
        avatar={AvatarSpec.generate().image}
        subtitle="NYC"
      ></CheckMarkCard>
      <CheckMarkCard
        label="Hansel"
        value="hansel"
        avatar={AvatarSpec.generate().image}
        subtitle="Los Angeles"
      ></CheckMarkCard>
      <CheckMarkCard
        label="Matilda"
        heading="Matilda heading"
        value="matilda"
        avatar={AvatarSpec.generate().image}
        subtitle="Charlotte"
      ></CheckMarkCard>
      <CheckMarkCard
        label="Mugatu"
        value="mugatu"
        disabled
        cardTooltipText="Tooltip on the whole card"
        avatar={AvatarSpec.generate().image}
        subtitle="Tokyo"
      ></CheckMarkCard>
      <CheckMarkCard
        avatar={AvatarSpec.generate().image}
        label="Elaine"
        value="elaine"
        iconName="lock-closed"
        iconSize="20"
        status="locked"
        markColor="lavender"
        tooltipText="This is locked, leave it alone"
        showHeading={false}
      ></CheckMarkCard>
      <CheckMarkCard
        label="Mark"
        value="mark"
        subtitle="Queens"
      ></CheckMarkCard>
    </CheckMarkCard.Grid>
  </Story>
</Canvas>
