import type { Meta } from '@storybook/vue3';
import NavigationMenu from '@/lib/components/NavigationMenu';
import {
  appearanceOptions,
  commonArgTypes,
  radiusOptions,
  scalingOptions,
  sizeOptions
} from '@/lib/constants';
import Text from '@/lib/components/Text/Text.vue';

const meta = {
  title: 'Navigation Component/NavigationMenu',
  component: NavigationMenu.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: `웹사이트의 페이지를 탐색하기 위해 하이퍼텍스트 링크를 포함하고 있는 인터페이스 요소`
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'NavigationMenu border 둥굴기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'NavigationMenu 비율'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: sizeOptions
            .filter((option) => option === 'small' || option === 'medium')
            .join(' | ')
        }
      },
      options: sizeOptions.filter((option) => option === 'small' || option === 'medium'),
      description: 'NavigationMenu 크기'
    },
    color: {
      ...commonArgTypes.color,
      description: 'NavigationMenu 메인 색'
    },
    appearance: {
      description: 'NavigationMenu 스타일',
      table: {
        category: 'Props',
        type: {
          summary: appearanceOptions
            .filter((option) => option === 'solid' || option === 'ghost')
            .join(' | ')
        }
      },
      options: appearanceOptions.filter((option) => option === 'solid' || option === 'ghost'),
      control: { type: 'select' },
      defaultValue: { summary: 'ghost' }
    }
  }
} as Meta;

const NavigatioinMenuComponent = {
  NavigationMenuRoot: NavigationMenu.Root,
  NavigationMenuList: NavigationMenu.List,
  NavigationMenuIndicator: NavigationMenu.Indicator,
  NavigationMenuItem: NavigationMenu.Item,
  NavigationMenuTrigger: NavigationMenu.Trigger,
  NavigationMenuContent: NavigationMenu.Content,
  NavigationMenuViewport: NavigationMenu.Viewport,
  NavigationMenuLink: NavigationMenu.Link,
  Text
};

export default meta;

export const Default = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args };
    },
    template: `
    <div class="h-[300px] w-[900px]">
      <NavigationMenuRoot v-bind="args">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="flex space-x-2">
                <img
                  class="rounded w-[120px] h-[150px]"
                  :src="'https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80'"
                  :alt="'Landscape photograph by Tobias Tullius'"
                />
                <div class="justify-between flex flex-col w-[100px]">
                  <div class="p-2 border flex flex-col hover:bg-slate-3 dark:hover:bg-slateDark-3">
                    <Text weight="bold">타이틀</Text>
                    <Text>내용</Text>
                  </div>
                  <div class="p-2 border flex flex-col hover:bg-slate-3 dark:hover:bg-slateDark-3">
                    <Text weight="bold">타이틀</Text>
                    <Text>내용</Text>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuTrigger>개요</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="flex flex-col space-y-3 p-3">
                <div class="hover:bg-slate-3 dark:hover:bg-slateDark-3">
                  <div class="flex flex-col">
                    <Text weight="bold">타이틀이 들어가는 자리입니다.</Text>
                    <Text>내용이 들어가는 자리입니다.</Text>
                  </div>
                </div>
                <div class="hover:bg-slate-3 dark:hover:bg-slateDark-3">
                  <div class="flex flex-col">
                    <Text weight="bold">타이틀이 들어가는 자리입니다.</Text>
                    <Text>내용이 들어가는 자리입니다.</Text>
                  </div>
                </div>
                <div class="hover:bg-slate-3 dark:hover:bg-slateDark-3">
                  <div class="flex flex-col">
                    <Text weight="bold">타이틀이 들어가는 자리입니다.</Text>
                    <Text>내용이 들어가는 자리입니다.</Text>
                  </div>
                </div>
              </div>
            </NavigationMenuContent>
          </NavigationMenuItem>

          <NavigationMenuItem>
            <NavigationMenuLink :href="'https://tailwindcss.com/docs/border-radius'">
              tailwind 바로가기
            </NavigationMenuLink>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
    `
  })
};

export const Color = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args, colorOptions: ['crimson', 'green', 'violet'] };
    },
    template: `
    <div className="flex space-x-4 w-[900px]">
      <template v-for="color in colorOptions" :key="color">
        <div class="h-[200px] w-[200px]">
          <NavigationMenuRoot :color="color">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div class="p-2">내용이 들어가는 자리입니다.</div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <NavigationMenuViewport />
          </NavigationMenuRoot>
        </div>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex space-x-4 w-[900px]">
  <template v-for="color in ['crimson', 'green', 'violet']" :key="color">
    <div class="h-[200px] w-[200px]">
      <NavigationMenuRoot :color="color">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="p-2">내용이 들어가는 자리입니다.</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
  </template>
</div>`
      }
    }
  }
};

export const Radius = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div className="flex space-x-4 w-[900px]">
      <template v-for="radius in radiusOptions" :key="radius">
        <div class="h-[200px] w-[200px]">
          <NavigationMenuRoot :radius="radius">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div class="p-2">내용</div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <NavigationMenuViewport />
          </NavigationMenuRoot>
        </div>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex space-x-4 w-[900px]">
  <template v-for="radius in ['none', 'small', 'medium', 'large', 'full']" :key="radius">
    <div class="h-[200px] w-[200px]">
      <NavigationMenuRoot :radius="radius">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="p-2">내용</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
  </template>
</div>`
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args, sizeOptions: ['small', 'medium'] };
    },
    template: `
    <div className="flex space-x-4 w-[900px]">
      <template v-for="size in sizeOptions" :key="size">
        <div class="h-[200px] w-[200px]">
          <NavigationMenuRoot :size="size">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div class="p-2">내용이 들어가는 자리입니다.</div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <NavigationMenuViewport />
          </NavigationMenuRoot>
        </div>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex space-x-4 w-[900px]">
  <template v-for="size in ['small', 'medium']" :key="size">
    <div class="h-[200px] w-[200px]">
      <NavigationMenuRoot :size="size">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="p-2">내용이 들어가는 자리입니다.</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
  </template>
</div>`
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args, appearanceOptions: ['ghost', 'solid'] };
    },
    template: `
    <div className="flex space-x-4 w-[900px]">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <div class="h-[200px] w-[200px]">
          <NavigationMenuRoot :appearance="appearance">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div class="p-2">내용</div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <NavigationMenuViewport />
          </NavigationMenuRoot>
        </div>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex space-x-4 w-[900px]">
  <template v-for="appearance in ['ghost', 'solid']" :key="appearance">
    <div class="h-[200px] w-[200px]">
      <NavigationMenuRoot :appearance="appearance">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="p-2">내용</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
  </template>
</div>`
      }
    }
  }
};

export const Scaling = {
  render: (args: any) => ({
    components: NavigatioinMenuComponent,
    setup() {
      return { args, scalingOptions };
    },
    template: `
    <div className="flex space-x-4 w-[900px]">
      <template v-for="scaling in scalingOptions" :key="scaling">
        <div class="h-[200px] w-[200px]">
          <NavigationMenuRoot :scaling="scaling">
            <NavigationMenuList>
              <NavigationMenuItem>
                <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
                <NavigationMenuContent>
                  <div class="p-2">내용</div>
                </NavigationMenuContent>
              </NavigationMenuItem>
            </NavigationMenuList>
            <NavigationMenuViewport />
          </NavigationMenuRoot>
        </div>
      </template>
    </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex space-x-4 w-[900px]">
  <template v-for="scaling in ['90%', '95%', '100%', '105%', '110%']" :key="scaling">
    <div class="h-[200px] w-[200px]">
      <NavigationMenuRoot :scaling="scaling">
        <NavigationMenuList>
          <NavigationMenuItem>
            <NavigationMenuTrigger>홈페이지</NavigationMenuTrigger>
            <NavigationMenuContent>
              <div class="p-2">내용</div>
            </NavigationMenuContent>
          </NavigationMenuItem>
        </NavigationMenuList>
        <NavigationMenuViewport />
      </NavigationMenuRoot>
    </div>
  </template>
</div>`
      }
    }
  }
};