import {
  Meta,
  Story,
  Canvas,
  ArgsTable,
  Anchor
} from '@storybook/addon-docs/blocks';

import AvatarIntroduction from './content/AvatarIntroduction.mdx';

import { argTypesDefault, parametersDefault, argTypesInitial, parametersInitial } from './config';
import MAvatar from '../../Avatar';

<Meta title="Avatar" component={MAvatar} />

# Avatar

<AvatarIntroduction />

export const Template = (args) => ({
  props: ['size', 'src', 'name', 'circle', 'tooltipId', 'showOverlay', 'showOverlayIcon'],
  components: { MAvatar },
  template: `
    <div class="pt-6">
      <m-avatar
        tooltip-id="oka"
        :size="size"
        :src="src"
        :name="name"
        :show-overlay="showOverlay"
        :show-overlay-icon="showOverlayIcon"
        :circle="circle" />
    </div>
  `
});

<Canvas>
  <Story name="Default"
    argTypes={{ ...argTypesDefault }}
    parameters={{ ...parametersDefault }}>{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="Default" />

# Initial

export const TemplateInitial = (args) => ({
  props: ['size', 'name', 'initial', 'filterInitial', 'circle', 'tooltipId', 'showOverlay', 'showOverlayIcon'],
  components: { MAvatar },
  template: `
    <div class="pt-6">
      <m-avatar
        tooltip-id="hoho"
        :size="size"
        :name="name"
        :initial="initial"
        :filter-initial="filterInitial"
        :show-overlay="showOverlay"
        :show-overlay-icon="showOverlayIcon"
        :circle="circle" />
    </div>
  `
});

<Canvas>
  <Story name="Initial"
    args={{
      name: "John Doe",
      initial: true
    }}
    argTypes={{ ...argTypesInitial }}
    parameters={{ ...parametersInitial }}>{TemplateInitial.bind({})}</Story>
</Canvas>

<ArgsTable story="Initial" />