import ScrollArea from '@/lib/components/ScrollArea';
import Separator from '@/lib/components/Separator';
import { commonArgTypes } from '@/lib/constants';
import { sizeOptions } from '@/lib/constants';
import type { Meta } from '@storybook/vue3';
import { ISize } from '@/lib/types';

const meta = {
  title: 'Layout Component/ScrollArea',
  component: ScrollArea.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '스크롤 가능 영역'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'scrollArea 둥글기'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions
            .filter((value: ISize) => value != 'x-small' && value != 'x-large')
            .join(' | ')
        }
      },
      options: sizeOptions.filter((value: ISize) => value != 'x-small' && value != 'x-large'),
      description: 'scrollArea 크기'
    }
  }
} as Meta;

export default meta;

export const Default = {
  render: (args: any) => ({
    components: {
      ScrollArea: ScrollArea.Root,
      Separator
    },
    data() {
      const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
      return { tags };
    },
    setup() {
      return { args };
    },
    template: `
    <ScrollArea class="h-72 w-48 border" v-bind='args'>
      <div class="p-4">
        <h4 class="mb-4 text-sm font-medium leading-none">
          Tags
        </h4>

        <div v-for="tag in tags" :key="tag">
          <div class="text-sm">
            {{ tag }}
          </div>
          <Separator class="my-2" size="fill-large" />
        </div>
      </div>
    </ScrollArea>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <ScrollArea class="h-72 w-48 border">
    <div class="p-4">
      <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
      <div v-for="tag in tags" :key="tag">
        <div class="text-sm">{{ tag }}</div>
        <Separator class="my-2" size="fill-large" />
      </div>
    </div>
  </ScrollArea>
</template>
        `
      }
    }
  }
};

export const Horizontal = {
  render: (args: any) => ({
    components: {
      ScrollArea: ScrollArea.Root,
      Scrollbar: ScrollArea.Scrollbar
    },
    data() {
      const works = [
        {
          id: '1',
          artist: 'Ornella Binni',
          art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80'
        },
        {
          id: '2',
          artist: 'Tom Byrom',
          art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80'
        },
        {
          id: '3',
          artist: 'Vladimir Malyavko',
          art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80'
        }
      ];
      return { works };
    },
    setup() {
      return { args };
    },
    template: `
    <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
      <div class="flex p-4 space-x-4 w-max">
        <div v-for="artwork in works" :key="artwork.id">
          <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
              <img
                :src="artwork.art"
                :alt="\`Photo by \${artwork.artist}\`"
                class="aspect-[3/4] w-36 h-56 object-cover"
              >
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
              Photo by
              <span class="font-semibold text-foreground">
                {{ artwork.artist }}
              </span>
            </figcaption>
          </figure>
        </div>
      </div>
      <Scrollbar orientation="horizontal" />
  </ScrollArea>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
      <div class="flex p-4 space-x-4 w-max">
        <div v-for="artwork in works" :key="artwork.id">
          <figure class="shrink-0">
            <div class="overflow-hidden rounded-md">
              <img :src="artwork.art" :alt="\`Photo by \${artwork.artist}\`" class="aspect-[3/4] w-36 h-56 object-cover">
            </div>
            <figcaption class="pt-2 text-xs text-muted-foreground">
              Photo by
              <span class="font-semibold text-foreground">
                {{ artwork.artist }}
              </span>
            </figcaption>
          </figure>
        </div>
      </div>
      <Scrollbar orientation="horizontal" />
  </ScrollArea>
</template>
        `
      }
    }
  }
};