import type { Meta } from '@storybook/vue3';
import { commonArgTypes } from '@/lib/constants';
import DropdownMenu from '@/lib/components/DropdownMenu';
import Button from '@/lib/components/Button';
import { Icon } from '@iconify/vue';
import Gnb from '@/lib/components/Gnb';

const meta = {
  title: 'Navigation Component/Gnb',
  component: Gnb.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component:
          '상단에 위치하며 주요 네비게이션 링크와 로고, 사용자 메뉴 등을 포함하는 UI 요소입니다.'
      }
    }
  },
  argTypes: {
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large'],
      defaultValue: { summary: 'medium' },
      description: 'gnb 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'gnb 비율'
    },
    color: {
      ...commonArgTypes.color,
      description: 'gnb 색상',
      defaultValue: { summary: 'none' }
    },
    default: { table: { disable: true } }
  }
} as Meta;

export default meta;

const commonComponents = {
  GnbRoot: Gnb.Root,
  GnbLogo: Gnb.Logo,
  GnbMenu: Gnb.Menu,
  GnbMenuItem: Gnb.MenuItem,
  GnbInfo: Gnb.Info,
  Button,
  Icon
};

export const Default = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      return { args };
    },
    template: `
     <GnbRoot v-bind='args'>
      <GnbLogo :href="'/'"/>
      <GnbMenu>
        <GnbMenuItem :active="true">Document</GnbMenuItem>
        <GnbMenuItem :href="'/components'">Components</GnbMenuItem>
        <GnbMenuItem :href="'/themes'">Themes</GnbMenuItem>
        <GnbMenuItem :href="'/colors'">Colors</GnbMenuItem>
      </GnbMenu>
      <GnbInfo>
        <a href='#' target="_blank" rel="noreferrer">
          <Button :appearance="'ghost'" class="h-8 w-8 px-0">
            <Icon icon="mdi:info-circle-outline" />
          </Button>
        </a>
        <a href='#' target="_blank" rel="noreferrer">
          <Button :appearance="'ghost'" class="h-8 w-8 px-0">
            <Icon icon="radix-icons:person" /> 
          </Button>
        </a>
      </GnbInfo>
    </GnbRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <GnbRoot>
    <GnbLogo :href="'/'"/>
    <GnbMenu>
      <GnbMenuItem :active="true">Document</GnbMenuItem>
      <GnbMenuItem :href="'/components'">Components</GnbMenuItem>
      <GnbMenuItem :href="'/themes'">Themes</GnbMenuItem>
      <GnbMenuItem :href="'/colors'">Colors</GnbMenuItem>
    </GnbMenu>
    <GnbInfo>
      <a href='#' target="_blank" rel="noreferrer">
        <Button :appearance="'ghost'" class="h-8 w-8 px-0">
          <Icon icon="mdi:info-circle-outline" />
        </Button>
      </a>
      <a href='#' target="_blank" rel="noreferrer">
        <Button :appearance="'ghost'" class="h-8 w-8 px-0">
          <Icon icon="radix-icons:person" /> 
        </Button>
      </a>
    </GnbInfo>
  </GnbRoot>
</template>`
      }
    }
  }
};

export const CustomContent = {
  render: (args: any) => ({
    components: {
      ...commonComponents,
      DropdownMenuRoot: DropdownMenu.Root,
      DropdownMenuTrigger: DropdownMenu.Trigger,
      DropdownMenuContent: DropdownMenu.Content,
      DropdownMenuItem: DropdownMenu.Item
    },
    setup() {
      return { args };
    },
    template: `
     <GnbRoot v-bind='args'>
      <GnbLogo />
      <GnbMenu>
        <GnbMenuItem :active="true">Document</GnbMenuItem>
        <GnbMenuItem :href="'/components'">Components</GnbMenuItem>
        <GnbMenuItem :href="'/themes'">Themes</GnbMenuItem>
        <GnbMenuItem :href="'/colors'">Colors</GnbMenuItem>
      </GnbMenu>
      <GnbInfo>
        <a href='#' target="_blank" rel="noreferrer">
          <Button appearance="ghost" class="h-8 w-28 gap-1 px-0">
            <Icon icon="mdi:info-circle-outline" />
            이용매뉴얼
          </Button>
        </a>
        <a href='#' target="_blank" rel="noreferrer">
          <Button :appearance="'ghost'" class="h-8 w-24 gap-1 px-0">
            <Icon icon="radix-icons:person" /> 
            admin
          </Button>
        </a>
        <DropdownMenuRoot v-bind='args'>
          <DropdownMenuTrigger>
            <Button :appearance="'ghost'" class="h-8 w-8 px-0">
              <Icon icon="radix-icons:sun" /> 
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem @click={}>Light</DropdownMenuItem>
            <DropdownMenuItem @click={}>Dark</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenuRoot>
      </GnbInfo>
    </GnbRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <GnbRoot>
    <GnbLogo />
    <GnbMenu>
      <GnbMenuItem :active="true">Document</GnbMenuItem>
      <GnbMenuItem :href="'/components'">Components</GnbMenuItem>
      <GnbMenuItem :href="'/themes'">Themes</GnbMenuItem>
      <GnbMenuItem :href="'/colors'">Colors</GnbMenuItem>
    </GnbMenu>
    <GnbInfo>
      <a href='#' target="_blank" rel="noreferrer">
        <Button appearance="ghost" class="h-8 w-28 gap-1 px-0">
          <Icon icon="mdi:info-circle-outline" />
          이용매뉴얼
        </Button>
      </a>
      <a href='#' target="_blank" rel="noreferrer">
        <Button :appearance="'ghost'" class="h-8 w-24 gap-1 px-0">
          <Icon icon="radix-icons:person" /> 
          admin
        </Button>
      </a>
      <DropdownMenuRoot v-bind='args'>
        <DropdownMenuTrigger>
          <Button :appearance="'ghost'" class="h-8 w-8 px-0">
            <Icon icon="radix-icons:sun" /> 
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem @click={}>Light</DropdownMenuItem>
          <DropdownMenuItem @click={}>Dark</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenuRoot>
    </GnbInfo>
  </GnbRoot>
</template>
        `
      }
    }
  }
};