import Avatar from '@/lib/components/Avatar';
import {
  appearanceOptions,
  commonArgTypes,
  radiusOptions,
  scalingOptions,
  typoSizeOptions
} from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import { Icon } from '@iconify/vue';

const meta = {
  title: 'Basic Component/Avatar',
  component: Avatar,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component:
          '사용자 프로필 아이콘으로 사용자를 대표하는 이미지를 사진이나 이니셜로 표현하는 컴포넌트'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'Avatar 둥굴기',
      defaultValue: { summary: 'full' }
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Avatar 비율'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: '1 ~ 9' }
      },
      options: typoSizeOptions,
      control: { type: 'select' },
      description: 'Avatar 크기',
      defaultValue: { summary: '3' }
    },
    color: {
      ...commonArgTypes.color,
      description: 'Avatar 메인 color'
    },
    appearance: {
      ...commonArgTypes.appearance,
      description: 'Avatar 스타일',
      table: {
        category: 'Props',
        type: {
          summary: appearanceOptions
            .filter((option) => option === 'solid' || option === 'soft')
            .join(' | ')
        }
      },
      options: appearanceOptions.filter((option) => option === 'solid' || option === 'soft')
    },
    delayMs: {
      table: {
        disable: true
      }
    }
  }
} as Meta;

export default meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Avatar,
      Icon
    },
    setup() {
      return { args };
    },
    template: `
    <div className="flex space-x-4">
      <Avatar
        imagePath="https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?&w=128&h=128&dpr=2&q=80"
        v-bind='args'
        />
      <Avatar v-bind='args'>FB</Avatar>
      <Avatar v-bind='args'><Icon icon="radix-icons:person" /></Avatar>
    </div>`
  })
};

export const Radius = {
  render: (args: any) => ({
    components: {
      Avatar
    },
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div className="flex space-x-4">
      <template v-for="radius in radiusOptions" :key="radius">
        <Avatar
          imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
          v-bind='args'
          :radius
          />
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Avatar
    imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
    :radius="none" />
  <Avatar
    imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
    :radius="small" />
  <Avatar
    imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
    :radius="medium" />
  <Avatar
    imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
    :radius="large" />
  <Avatar
    imagePath="https://images.unsplash.com/photo-1511485977113-f34c92461ad9?ixlib=rb-1.2.1&w=128&h=128&dpr=2&q=80"
    :radius="full" />
</template>`
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: {
      Avatar
    },
    setup() {
      return { args, typoSizeOptions };
    },
    template: `
    <div className="flex space-x-4">
      <template v-for="size in typoSizeOptions" :key="size">
        <Avatar v-bind='args' :size>{{ size }}</Avatar>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Avatar :size="1">1</Avatar>
  <Avatar :size="2">2</Avatar>
  ...
  <Avatar :size="9">9</Avatar>
  <Avatar :size="10">10</Avatar>
</template>`
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: {
      Avatar
    },
    setup() {
      return { args, scalingOptions };
    },
    template: `
    <div className="flex space-x-4">
      <template v-for="scaling in scalingOptions" :key="scaling">
        <Avatar 
          v-bind='args' 
          imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
          :scaling />
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Avatar 
    imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
    :scaling="90%" />
  <Avatar 
    imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
    :scaling="95%" />
  <Avatar 
    imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
    :scaling="100%" />
  <Avatar 
    imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
    :scaling="105%" />
  <Avatar 
    imagePath="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop" 
    :scaling="110%" />
</template>
        `
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: {
      Avatar,
      Icon
    },
    setup() {
      return { args, appearanceOptions: ['solid', 'soft'] };
    },
    template: `
    <div className="flex space-x-4">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <Avatar v-bind='args' :appearance><Icon icon="radix-icons:person" /></Avatar>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <Avatar :appearance="solid"><Icon icon="radix-icons:person" /></Avatar>
  <Avatar :appearance="soft"><Icon icon="radix-icons:person" /></Avatar>
</template>`
      }
    }
  }
};