import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { select } from '@storybook/addon-knobs';
import ChecIcon from '../../components/ChecIcon.vue';
import ChecNavIcon from '../../components/ChecNavIcon.vue';
import ChecMarketingIcon from '../../components/ChecMarketingIcon.vue';
import { uiIcons, navIcons, mIcons } from '../../lib/icons';
const colors = {
  blue: 'text-primary-blue',
  gray: 'text-gray-500',
  white: 'text-white',
  blue600: 'text-blue-600',
  green600: 'text-green-600',
  red600: 'text-red-600',
  purple600: 'text-purple-600',
  orange600: 'text-orange-600',
}

<Meta title="Components/Icon" component={ ChecIcon } />

# Icon

#### There are 3 main groups of icons: UI, Navigation, Marketing
- UI icons are standard stroke icons utilized throughout product interface
    - Sizes are customized using inline class attributes `w-3 h-3` for 12px and `w-4 h-4` for 16px

- Marketing icons are utilize on marketing site and product dashboard
    - Two sets of icons: 32px & 80px

<Props of={ ChecIcon } />

## UI icons

<Preview>
  <Story name="UI icon">
    {{
      components: {
        ChecIcon
      },
      props: {
        icon: {
          default: select('Icon', Object.keys(uiIcons), 'left')
        },
        color: {
          default: select('Color', colors, colors.blue)
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-200">
          <chec-icon :icon="icon" class="w-24 h-24" :class="color" />
        </div>`,
    }}
  </Story>
</Preview>

## All UI icons

<Preview>
  <Story name="All UI icons">
    {{
      components: {
        ChecIcon
      },
      props: {
        icons: {
          default: uiIcons,
        },
        color: {
          default: select('Color', colors, colors.blue)
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-200">
          <chec-icon
            v-for="(_, icon) in icons"
            :key="icon"
            :icon="icon"
            class="w-6 h-6"
            :class="color"
            v-tooltip="icon"
          />
        </div>`,
    }}
  </Story>
</Preview>

## Navigation icons

<Preview>
  <Story name="Navigation icons">
    {{
      components: {
        ChecNavIcon
      },
      props: {
        icon: {
          default: select('Icon', Object.keys(navIcons), 'orders')
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-100">
          <chec-nav-icon :icon="icon" class="w-24 h-24"/>
        </div>`,
    }}
  </Story>
</Preview>

## All navigation icons

<Preview>
  <Story name="All navigation icons">
    {{
      components: {
        ChecNavIcon
      },
      props: {
        icons: {
          default: navIcons,
        },
        color: {
          default: select('Color', colors, colors.blue)
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-200">
          <chec-nav-icon
            v-for="(_, icon) in icons"
            :key="icon"
            :icon="icon"
            class="w-12 h-12"
            :class="color"
            v-tooltip.top="icon"
          />
        </div>`,
    }}
  </Story>
</Preview>

## Marketing icons

<Preview>
  <Story name="Marketing icons">
    {{
      components: {
        ChecMarketingIcon
      },
      props: {
        icon: {
          default: select('Icon', Object.keys(mIcons), 'standard')
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-100">
          <chec-marketing-icon :icon="icon" class="w-24 h-24" />
        </div>`,
    }}
  </Story>
</Preview>

## All marketing icons

<Preview>
  <Story name="All marketing icons">
    {{
      components: {
        ChecMarketingIcon
      },
      props: {
        icons: {
          default: mIcons,
        },
        color: {
          default: select('Color', colors, colors.blue)
        },
      },
      template: `
        <div class="py-16 flex justify-center bg-gray-100">
          <chec-marketing-icon
            v-for="(_, icon) in icons"
            :key="icon"
            :icon="icon"
            class="w-12 h-12"
            :class="color"
            v-tooltip.top="icon"
          />
        </div>`,
    }}
  </Story>
</Preview>
