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

const meta = {
  title: 'Menu Select Component/DropdownMenu',
  component: DropdownMenu.Root,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '버튼을 클릭하여 세부항목을 확인하고 하나의 항목을 선택하는 기능'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'dropdownMenu 둥글기'
    },
    size: {
      ...commonArgTypes.size,
      table: {
        category: 'Props',
        type: {
          summary: ['small', 'medium'].join(' | ')
        }
      },
      options: ['small', 'medium'],
      description: 'dropdownMenu 크기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'dropdownMenu scaling'
    },
    color: {
      ...commonArgTypes.color,
      description: 'dropdownMenu color'
    },
    appearance: {
      ...commonArgTypes.appearance,
      table: {
        category: 'Props',
        type: { summary: ['solid', 'soft'].join(' | ') }
      },
      options: ['solid', 'soft']
    },
    default: { table: { disable: true } }
  }
} as Meta;

export default meta;

const commonComponents = {
  DropdownMenuRoot: DropdownMenu.Root,
  DropdownMenuTrigger: DropdownMenu.Trigger,
  DropdownMenuContent: DropdownMenu.Content,
  DropdownMenuLabel: DropdownMenu.Label,
  DropdownMenuItem: DropdownMenu.Item,
  DropdownMenuSeparator: DropdownMenu.Separator,
  DropdownMenuCheckboxItem: DropdownMenu.CheckboxItem,
  DropdownMenuRadioGroup: DropdownMenu.RadioGroup,
  DropdownMenuRadioItem: DropdownMenu.RadioItem,
  DropdownMenuSub: DropdownMenu.Sub,
  DropdownMenuSubTrigger: DropdownMenu.SubTrigger,
  DropdownMenuSubContent: DropdownMenu.SubContent,
  DropdownMenuItemIndicator: DropdownMenu.ItemIndicator,
  Button,
  Icon
};
export const Default = {
  render: (args: any) => ({
    components: commonComponents,
    setup() {
      const checkboxOne = ref(true);
      const checkboxTwo = ref(false);
      const option = ref('option1');

      return { args, option, checkboxOne, checkboxTwo };
    },
    template: `
     <DropdownMenuRoot v-bind='args'>
      <DropdownMenuTrigger>
        <Button class="flex gap-2">
          Options
         <Icon icon="radix-icons:chevron-down" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>라벨</DropdownMenuLabel>
        <DropdownMenuItem shortcut="⌘ E">기본 아이템</DropdownMenuItem>
        <DropdownMenuItem disabled>사용불가 아이템</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem v-model:checked="checkboxOne">체크박스1</DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem v-model:checked="checkboxTwo">체크박스2</DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />

        <DropdownMenuRadioGroup v-model="option">
          <DropdownMenuRadioItem value="option1">라디오1</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="option2">라디오2</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuSeparator />

        <DropdownMenuSub>
          <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
           <DropdownMenuSubContent>
             <DropdownMenuItem>project</DropdownMenuItem>
             <DropdownMenuItem>folder</DropdownMenuItem>
 
             <DropdownMenuSeparator />
             <DropdownMenuItem>options</DropdownMenuItem>
           </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenuRoot>
  `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>
      <Button class="flex gap-2">
        Options
      <Icon icon="radix-icons:chevron-down" />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuLabel>라벨</DropdownMenuLabel>
      <DropdownMenuItem shortcut="⌘ E">기본 아이템</DropdownMenuItem>
      <DropdownMenuItem disabled>사용불가 아이템</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuCheckboxItem v-model:checked="checkboxOne">체크박스1</DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem v-model:checked="checkboxTwo">체크박스2</DropdownMenuCheckboxItem>
      <DropdownMenuSeparator />

      <DropdownMenuRadioGroup v-model="option">
        <DropdownMenuRadioItem value="option1">라디오1</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="option2">라디오2</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
      <DropdownMenuSeparator />

      <DropdownMenuSub>
        <DropdownMenuSubTrigger>More</DropdownMenuSubTrigger>
        <DropdownMenuSubContent>
          <DropdownMenuItem>project</DropdownMenuItem>
          <DropdownMenuItem>folder</DropdownMenuItem>

          <DropdownMenuSeparator />
          <DropdownMenuItem>options</DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
    </DropdownMenuContent>
  </DropdownMenuRoot>
</template>
        `
      }
    }
  }
};

export const Radius = {
  render: () => ({
    components: commonComponents,
    setup() {
      return { radiusOptions };
    },
    template: `
    <div class="flex items-center space-x-4">
      <template
        v-for="radius in radiusOptions"
        :key="radius"
      >
        <DropdownMenuRoot :radius="radius">
          <DropdownMenuTrigger>
            <Button class="flex gap-2">
              {{radius}}
              <Icon icon="radix-icons:chevron-down" />
            </Button>
          </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>메뉴1</DropdownMenuItem>
              <DropdownMenuItem>메뉴2</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenuRoot>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div class="flex items-center space-x-4">
  <template v-for="radius in ['none', 'small', 'medium', 'large', 'full']" :key="radius">
    <DropdownMenuRoot :radius="radius">
      <DropdownMenuTrigger>
        <Button class="flex gap-2">
          {{radius}}
          <Icon icon="radix-icons:chevron-down" />
        </Button>
      </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>메뉴1</DropdownMenuItem>
          <DropdownMenuItem>메뉴2</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenuRoot>
  </template>
</div>`
      }
    }
  }
};

export const Size = {
  render: () => ({
    components: commonComponents,
    setup() {
      const sizeOptions = ['small', 'medium'];
      return { sizeOptions };
    },
    template: `
    <div class="flex items-center space-x-4">
      <template
        v-for="size in sizeOptions"
        :key="size"
      >
        <DropdownMenuRoot :size="size">
          <DropdownMenuTrigger>
            <Button class="flex gap-2">
              {{size}}
              <Icon icon="radix-icons:chevron-down" />
            </Button>
          </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>메뉴1</DropdownMenuItem>
              <DropdownMenuItem>메뉴2</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenuRoot>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div class="flex items-center space-x-4">
  <template v-for="size in ['small', 'medium']" :key="size">
    <DropdownMenuRoot :size="size">
      <DropdownMenuTrigger>
        <Button class="flex gap-2">
          {{size}}
          <Icon icon="radix-icons:chevron-down" />
        </Button>
      </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>메뉴1</DropdownMenuItem>
          <DropdownMenuItem>메뉴2</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenuRoot>
  </template>
</div>`
      }
    }
  }
};

export const Appearance = {
  render: () => ({
    components: commonComponents,
    setup() {
      const appearanceOptions = ['solid', 'soft'];
      return { appearanceOptions };
    },
    template: `
    <div class="flex items-center space-x-4">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <DropdownMenuRoot :appearance="appearance">
          <DropdownMenuTrigger>
            <Button class="flex gap-2" :appearance="appearance">
              {{appearance}}
              <Icon icon="radix-icons:chevron-down" />
            </Button>
          </DropdownMenuTrigger>
            <DropdownMenuContent>
              <DropdownMenuItem>메뉴1</DropdownMenuItem>
              <DropdownMenuItem>메뉴2</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenuRoot>
        </template>
      </div>
    `
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div class="flex items-center space-x-4">
  <template v-for="appearance in ['solid', 'soft']" :key="appearance">
    <DropdownMenuRoot :appearance="appearance">
      <DropdownMenuTrigger>
        <Button class="flex gap-2" :appearance="appearance">
          {{appearance}}
          <Icon icon="radix-icons:chevron-down" />
        </Button>
      </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>메뉴1</DropdownMenuItem>
          <DropdownMenuItem>메뉴2</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenuRoot>
  </template>
</div>`
      }
    }
  }
};