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

const meta = {
  title: 'Menu Select Component/ContextMenu',
  component: ContextMenu,
  parameters: {
    layout: 'centered',
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '우클릭 또는 특정 인터랙션 시 나타나는 컨텍스트 메뉴 컴포넌트'
      }
    }
  },
  argTypes: {
    radius: {
      ...commonArgTypes.radius,
      description: 'ContextMenu 둥굴기'
    },
    scaling: {
      ...commonArgTypes.scaling,
      description: 'ContextMenu 비율'
    },
    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: 'Menubar 크기'
    },
    color: {
      ...commonArgTypes.color,
      description: 'Menubar 메인 색'
    },
    appearance: {
      description: 'MenubarItem 스타일',
      table: {
        category: 'Props',
        type: {
          summary: appearanceOptions
            .filter((option) => option === 'solid' || option === 'soft')
            .join(' | ')
        }
      },
      options: appearanceOptions.filter((option) => option === 'solid' || option === 'soft'),
      control: { type: 'select' },
      defaultValue: { summary: 'solid' }
    }
  }
} as Meta;

export default meta;

const ContextMenuComponent = {
  ContextMenuRoot: ContextMenu.Root,
  ContextMenuTrigger: ContextMenu.Trigger,
  ContextMenuContent: ContextMenu.Content,
  ContextMenuLabel: ContextMenu.Label,
  ContextMenuItem: ContextMenu.Item,
  ContextMenuGroup: ContextMenu.Group,
  ContextMenuCheckboxItem: ContextMenu.CheckboxItem,
  ContextMenuItemIndicator: ContextMenu.ItemIndicator,
  ContextMenuRadioGroup: ContextMenu.RadioGroup,
  ContextMenuRadioItem: ContextMenu.RadioItem,
  ContextMenuSeparator: ContextMenu.Separator,
  ContextMenuSubTrigger: ContextMenu.SubTrigger,
  ContextMenuSubContent: ContextMenu.SubContent,
  Text
};

export const Default = {
  render: (args: any) => ({
    components: ContextMenuComponent,
    setup() {
      const checkValue1 = ref(true);
      const checkValue2 = ref(false);
      const radioValue = ref('apple');

      return { checkValue1, checkValue2, radioValue, args };
    },
    template: `
    <ContextMenuRoot v-bind='args'>
      <ContextMenuTrigger class="w-[300px] select-none rounded border-2 border-dashed py-[45px]">
        <Text size='2'>마우스 오른쪽 버튼 클릭 시 메뉴가 나타납니다</Text>
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuLabel>라벨</ContextMenuLabel>
        <ContextMenuItem shortcut="⌘ T">기본 아이템</ContextMenuItem>
        <ContextMenuItem disabled>사용불가 아이템</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuItem>그룹 아이템1</ContextMenuItem>
          <ContextMenuItem>그룹 아이템2</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem v-model:checked="checkValue1">checked 아이템1</ContextMenuCheckboxItem>
        <ContextMenuCheckboxItem v-model:checked="checkValue2">checked 아이템2</ContextMenuCheckboxItem>
        <ContextMenuSeparator />
        <ContextMenuRadioGroup v-model="radioValue">
          <ContextMenuRadioItem value="apple">라디오 아이템1</ContextMenuRadioItem>
          <ContextMenuRadioItem value="banana">라디오 아이템2</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
        <ContextMenuSeparator />
        <ContextMenuSubTrigger>
          More Menu
          <ContextMenuSubContent>
            <ContextMenuItem>서브 아이템1</ContextMenuItem>
            <ContextMenuItem>서브 아이템2</ContextMenuItem>
          </ContextMenuSubContent>
        </ContextMenuSubTrigger>
      </ContextMenuContent>
    </ContextMenuRoot>
    `
  })
};

export const Radius = {
  render: (args: any) => ({
    components: ContextMenuComponent,
    setup() {
      return { args, radiusOptions };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="radius in radiusOptions" :key="radius">
        <ContextMenuRoot :radius="radius">
          <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
            {{ radius }}
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>메뉴1</ContextMenuItem>
            <ContextMenuItem>메뉴2</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenuRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex items-center gap-5">
  <template v-for="radius in ['none', 'small', 'medium', 'large', 'full']" :key="radius">
    <ContextMenuRoot :radius="radius">
      <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
        {{ radius }}
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>메뉴1</ContextMenuItem>
        <ContextMenuItem>메뉴2</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuRoot>
  </template>
</div>`
      }
    }
  }
};

export const Appearance = {
  render: (args: any) => ({
    components: ContextMenuComponent,
    setup() {
      return { args, appearanceOptions: ['solid', 'soft'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="appearance in appearanceOptions" :key="appearance">
        <ContextMenuRoot :appearance="appearance">
          <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
            {{ appearance }}
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>메뉴1</ContextMenuItem>
            <ContextMenuItem>메뉴2</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenuRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex items-center gap-5">
  <template v-for="radius in ['solid', 'soft']" :key="appearance">
    <ContextMenuRoot :appearance="appearance">
      <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
        {{ appearance }}
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>메뉴1</ContextMenuItem>
        <ContextMenuItem>메뉴2</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuRoot>
  </template>
</div>`
      }
    }
  }
};

export const Size = {
  render: (args: any) => ({
    components: ContextMenuComponent,
    setup() {
      return { args, sizeOptions: ['small', 'medium'] };
    },
    template: `
    <div className="flex items-center gap-5">
      <template v-for="size in sizeOptions" :key="size">
        <ContextMenuRoot :size="size">
          <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
            {{ size }}
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>메뉴1</ContextMenuItem>
            <ContextMenuItem>메뉴2</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenuRoot>
      </template>
    </div>`
  }),
  parameters: {
    docs: {
      source: {
        code: `
<div className="flex items-center gap-5">
  <template v-for="radius in ['solid', 'soft']" :key="size">
    <ContextMenuRoot :size="size">
      <ContextMenuTrigger class="w-[100px] border-2 border-dashed">
        {{ size }}
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem>메뉴1</ContextMenuItem>
        <ContextMenuItem>메뉴2</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenuRoot>
  </template>
</div>`
      }
    }
  }
};