import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { action } from '@storybook/addon-actions';
import { boolean, select } from '@storybook/addon-knobs';
import ChecCard from '../../components/ChecCard.vue';
import ChecIcon from '../../components/ChecIcon.vue';
import TextField from '../../components/TextField.vue';

<Meta title="Components/Card" component={ChecCard} />

# Card Component

<Props of={ChecCard} />

<Preview>
  <Story name="Default">
    {{
      components: {
        ChecCard
      },
      props: {
        borders: {
          default: select('Borders', ['none', 'full', 'vertical', 'horizontal'], 'none'),
        },
        borderStyle: {
          default: select('Border style', ['dark', 'light', 'holo'], 'holo'),
        },
        background: {
          default: select('Background', ['white', 'dark', 'transparent', 'gray'], 'white'),
        },
        compact: {
          default: boolean('Compact')
        },
        noShadow: {
          default: boolean('No shadow?')
        },
        active: {
          default: boolean('Active', false)
        },
        hoverable: {
          default: boolean('Hoverable', true)
        },
      },
      template: `
        <div class="p-16 flex justify-center w-full bg-gray-100">
          <ChecCard
            :borders="borders"
            :compact="compact"
            :background="background"
            :border-style="borderStyle"
            :no-shadow="noShadow"
            :active="active"
            :hoverable="hoverable"
            class="w-40 h-40"
          >
            <p class="self-center mx-auto">Nothing here</p>
          </ChecCard>
        </div>`
    }}
  </Story>
</Preview>

## Border options

<Preview>
  <Story name="Border options">
    {{
      components: {
        ChecCard
      },
      props: {
        borderStyle: {
          default: select('Border style', ['dark', 'light', 'holo'], 'holo'),
        },
        active: {
          default: boolean('Active', false)
        },
        hoverable: {
          default: boolean('Hoverable', true)
        },
        background: {
          default: select('Background', ['white', 'dark', 'gray', 'transparent'], 'white'),
        },
        noShadow: {
          default: boolean('No shadow'),
        },
      },
      data() {
        return {
          borders: ['none', 'full', 'vertical', 'horizontal'],
        };
      },
      template: `
        <div class="p-16 flex flex-col justify-between items-center w-full bg-gray-100 space-y-4">
          <ChecCard
            v-for="border in borders"
            :borders="border"
            :border-style="borderStyle"
            :background="background"
            :no-shadow="noShadow"
            :active="active"
            :hoverable="hoverable"
            class="w-1/2 h-40
            text-center"
          >
            <code class="text-center">borders="{{ border }}"</code>
          </ChecCard>
        </div>`
    }}
  </Story>
</Preview>

## Compact

<Preview>
  <Story name="Compact">
    {{
      props: {
        active: {
          default: boolean('Active', false)
        },
        hoverable: {
          default: boolean('Hoverable', true)
        },
        noShadow: {
          default: boolean('No shadow?')
        },
      },
      components: {
        ChecCard
      },
      template: `
        <div class="p-16 flex justify-center w-full bg-gray-100">
          <ChecCard borders="full" border-style="holo" :no-shadow="noShadow" background="white" compact :active="active" :hoverable="hoverable" class="w-40 h-40">
            <p class="self-center mx-auto">Nothing here</p>
          </ChecCard>
        </div>`
    }}
  </Story>
</Preview>

## With content

<Preview>
  <Story name="With inner elements">
    {{
      components: {
        ChecCard,
        TextField,
      },
      props: {
        borders: {
          default: select('Borders', ['full', 'none', 'dark', 'light'], 'full'),
        },
        background: {
          default: select('Background', ['white', 'dark', 'gray', 'transparent'], 'white'),
        },
        active: {
          default: boolean('Active', false)
        },
        hoverable: {
          default: boolean('Hoverable', true)
        },
        noShadow: {
          default: boolean('No shadow?')
        },
      },
      template: `
        <div class="p-16 flex justify-center w-full font-lato">
          <ChecCard
            :borders="borders"
            :background="background"
            :no-shadow="noShadow"
            class="w-full max-w-lg"
            :active="active"
            :hoverable="hoverable"
          >
            <span class="block text-lg text-gray-500 font-bold mb-4">
              Update payment method
            </span>
            <!-- flex grid -->
            <div class="flex -mx-2">
              <div class="w-1/2 px-2">
                <TextField
                  class="w-full"
                  placeholder="First Name"
                />
              </div>
              <div class="w-1/2 px-2">
                <TextField
                  class="w-full"
                  placeholder="Last Name"
                />
              </div>
            </div>
          </ChecCard>
        </div>`
    }}
  </Story>
</Preview>

## "Custom" card

<Preview>
  <Story name="Fancy overlay">
    {{
      props: {
        active: {
          default: boolean('Active', false)
        },
        hoverable: {
          default: boolean('Hoverable', true)
        },
      },
      components: {
        ChecCard,
        TextField,
        ChecIcon,
      },
      template: `
        <div class="p-16 flex justify-center w-full font-lato">
          <ChecCard
            borders="none"
            class="text-white w-full max-w-lg"
            tailwind="bg-primary-gradient"
            :active="active"
            :hoverable="hoverable"
          >
            <h3 class="text-white mb-4">
              It's our brand!
            </h3>
            <p>
              Much wow! Such amaze!
            </p>
            <ChecIcon
              icon="chec"
              class="absolute w-32 h-32 text-white pointer-events-none opacity-25 bottom-0"
              style="right: 20px"
            />
          </ChecCard>
        </div>`
    }}
  </Story>
</Preview>