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

const meta = {
  title: 'Navigation Component/Breadcrumb',
  component: Breadcrumb.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '링크 계층을 사용하여 현재 리소스의 경로를 표시합니다.'
      }
    }
  },
  argTypes: {
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'breadcrumb 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'breadcrumb scaling'
    },
    color: {
      ...commonArgTypes.color,
      description: 'breadcrumb 글자 색상',
      defaultValue: { summary: 'black' }
    }
  }
} as Meta;

export default meta;

const commonComponents = {
  BreadcrumbRoot: Breadcrumb.Root,
  BreadcrumbItem: Breadcrumb.Item,
  BreadcrumbLink: Breadcrumb.Link,
  BreadcrumbList: Breadcrumb.List,
  BreadcrumbPage: Breadcrumb.Page,
  BreadcrumbSeparator: Breadcrumb.Separator,
  BreadcrumbEllipsis: Breadcrumb.Ellipsis
};

export const Default = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args };
    },
    template: `
    <BreadcrumbRoot v-bind='args'>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Level2</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">...</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
  </BreadcrumbRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <BreadcrumbRoot>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Level2</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">...</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
  </BreadcrumbRoot>
</template>
        `
      }
    }
  }
};

export const Scaling = {
  render: () => ({
    components: commonComponents,
    setup() {
      return { scalingOptions };
    },
    template: `
      <div className="space-y-2">
        <template
          v-for="scaling in scalingOptions"
          :key="scaling"
        >
        <BreadcrumbRoot :scaling="scaling">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Level2</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">...</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Page</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </BreadcrumbRoot>
       </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="space-y-2">
  <template v-for="scaling in ['90%', '95%', '100%', '105%', '110%']" :key="scaling">
    <BreadcrumbRoot :scaling="scaling">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Level2</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">...</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </BreadcrumbRoot>
  </template>
</div>
        `
      }
    }
  }
};

export const Size = {
  render: () => ({
    components: commonComponents,
    setup() {
      return { sizeOptions: ['small', 'medium', 'large'] };
    },
    template: `
      <div className="space-y-2">
        <template
          v-for="size in sizeOptions"
          :key="size"
        >
        <BreadcrumbRoot :size="size">
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Home</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">Level2</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="#">...</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>Page</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </BreadcrumbRoot>
       </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="space-y-2">
  <template v-for="size in ['small', 'medium', 'large']" :key="size">
    <BreadcrumbRoot :size="size">
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Level2</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">...</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Page</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </BreadcrumbRoot>
  </template>
</div>
        `
      }
    }
  }
};

export const WithIcon = {
  render: () => ({
    components: { ...commonComponents, Icon },
    template: `
      <BreadcrumbRoot>
        <BreadcrumbList>
          <BreadcrumbItem>
            <BreadcrumbLink href="#">
              <Icon icon="radix-icons:home"></Icon>
            </BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbLink href="#">내정보관리</BreadcrumbLink>
          </BreadcrumbItem>
          <BreadcrumbSeparator />
          <BreadcrumbItem>
            <BreadcrumbPage>My ID</BreadcrumbPage>
            <Icon icon="radix-icons:star"></Icon>
          </BreadcrumbItem>
        </BreadcrumbList>
      </BreadcrumbRoot>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <BreadcrumbRoot>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <Icon icon="radix-icons:home"></Icon>
        </BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">내정보관리</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>My ID</BreadcrumbPage>
        <Icon icon="radix-icons:star"></Icon>
      </BreadcrumbItem>
    </BreadcrumbList>
  </BreadcrumbRoot>
</template>
        `
      }
    }
  }
};