import { commonArgTypes } from '@/lib/constants';
import { Meta } from '@storybook/vue3/*';
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger
} from '@/lib/components/Sidebar';
import { Frame, Globe, Map, MoreHorizontal, PieChart, Plus } from 'lucide-vue-next';

const meta = {
  title: 'Layout Component/Sidebar',
  component: {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarInset,
    SidebarMenu,
    SidebarMenuAction,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarMenuSub,
    SidebarMenuSubButton,
    SidebarMenuSubItem,
    SidebarProvider,
    SidebarRail,
    SidebarTrigger
  },
  parameters: {
    themes: {
      themeOverride: 'dark'
    },
    docs: {
      description: {
        component: '시각적, 의미적으로 콘텐츠를 구분하는 선'
      },

      story: {
        inline: false,
        iframeHeight: 500
      }
    }
  },
  argTypes: {
    scaling: {
      ...commonArgTypes.scaling,
      description: 'Sidebar component 크기'
    },
    color: {
      ...commonArgTypes.color,
      defaultValue: { summary: 'slate' },
      description: 'Sidebar component 색상'
    },
    size: {
      table: {
        category: 'Props',
        type: { summary: ['small', 'medium', 'large', 'fill-large'].join(' | ') }
      },
      control: { type: 'select' },
      options: ['small', 'medium', 'large', 'fill-large'],
      defaultValue: { summary: 'medium' },
      description: 'Sidebar component 크기'
    }
  }
} as Meta;

export const Default = {
  render: (args: any) => ({
    components: {
      Sidebar,
      SidebarContent,
      SidebarFooter,
      SidebarGroup,
      SidebarGroupLabel,
      SidebarHeader,
      SidebarInset,
      SidebarMenu,
      SidebarMenuAction,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarMenuSub,
      SidebarMenuSubButton,
      SidebarMenuSubItem,
      SidebarProvider,
      SidebarRail,
      SidebarTrigger,
      Frame,
      Globe,
      Map,
      MoreHorizontal,
      PieChart
    },
    setup() {
      const data = {
        projects: [
          {
            name: 'Design Engineering',
            url: '#',
            icon: Frame
          },
          {
            name: 'Sales & Marketing',
            url: '#',
            icon: PieChart
          },
          {
            name: 'Travel',
            url: '#',
            icon: Map
          }
        ]
      };
      return { args, data };
    },
    template: `
    <SidebarProvider >
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem> Sidebar Header </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <Globe class="text-sidebar-foreground/70" />
                <span>Hello World</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem v-for="item in data.projects" :key="item.name">
              <SidebarMenuButton as-child>
                <a :href="item.url">
                  <component :is="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <MoreHorizontal class="text-sidebar-foreground/70" />
                <span>More</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem> Footer </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <header
      class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
    >
      <div class="flex items-center gap-2 px-4">
        <SidebarTrigger class="text-sidebar-foreground/90"  />
      </div>
    </header>
  </SidebarInset>
    </SidebarProvider>
    `
  })
};
export default meta;

export const SidebarGroupEx = {
  render: (args: any) => ({
    components: {
      Sidebar,
      SidebarContent,
      SidebarGroup,
      SidebarGroupLabel,
      SidebarMenu,
      SidebarGroupAction,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarProvider,
      Plus
    },
    setup() {
      const data = {
        projects: [
          {
            name: 'Design Engineering',
            url: '#',
            icon: Frame
          },
          {
            name: 'Sales & Marketing',
            url: '#',
            icon: PieChart
          },
          {
            name: 'Travel',
            url: '#',
            icon: Map
          }
        ]
      };
      return { args, data };
    },
    template: `
    <SidebarProvider class="h-[150px]" >
    <Sidebar >
    <SidebarContent>
      <SidebarGroup>
        <SidebarGroupLabel>Platform</SidebarGroupLabel>
        <SidebarGroupAction title="Add Project">
          <Plus /> <span class="sr-only">Add Project</span>
        </SidebarGroupAction>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="text-sidebar-foreground/70" color="red">
              <Globe class="text-sidebar-foreground/70" />
              <span>Hello World</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
      <SidebarGroup>
        <SidebarGroupLabel>Platform2</SidebarGroupLabel>
        <SidebarGroupAction title="Add Project">
          <Plus /> <span class="sr-only">Add Project</span>
        </SidebarGroupAction>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="text-sidebar-foreground/70">
              <Globe class="text-sidebar-foreground/70" />
              <span>Hello Lui</span>
            </SidebarMenuButton>
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarGroup>
    </SidebarContent>
  </Sidebar>
    </SidebarProvider>
    `
  })
};

export const SidebarSubEx = {
  render: (args: any) => ({
    components: {
      Sidebar,
      SidebarContent,
      SidebarMenu,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarProvider,
      SidebarMenuSub,
      SidebarMenuSubItem,
      SidebarMenuSubButton,
      Plus
    },
    setup() {
      const data = {
        projects: [
          {
            name: 'Design Engineering',
            url: '#',
            icon: Frame
          },
          {
            name: 'Sales & Marketing',
            url: '#',
            icon: PieChart
          },
          {
            name: 'Travel',
            url: '#',
            icon: Map
          }
        ]
      };
      return { args, data };
    },
    template: `
    <SidebarProvider class="h-[150px]" >
    <Sidebar >
    <SidebarContent>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="">
              <Globe class="" />
              <span>Getting Started</span>
            </SidebarMenuButton>
            <SidebarMenuSub>
            <SidebarMenuSubItem>
              <SidebarMenuSubButton ><span>Introduction</span></SidebarMenuSubButton>
            </SidebarMenuSubItem>
            <SidebarMenuSubItem>
              <SidebarMenuSubButton><span>Installation</span></SidebarMenuSubButton>
            </SidebarMenuSubItem>
          </SidebarMenuSub>
          </SidebarMenuItem>
        </SidebarMenu>
        <SidebarMenu>
          <SidebarMenuItem>
            <SidebarMenuButton class="">
              <Globe class="" />
              <span>Input component</span>
            </SidebarMenuButton>
            <SidebarMenuSub>
            <SidebarMenuSubItem>
              <SidebarMenuSubButton ><span>DatePicker</span></SidebarMenuSubButton>
            </SidebarMenuSubItem>
            <SidebarMenuSubItem>
              <SidebarMenuSubButton><span>TagsInput</span></SidebarMenuSubButton>
            </SidebarMenuSubItem>
            <SidebarMenuSubItem>
              <SidebarMenuSubButton><span>TextArea</span></SidebarMenuSubButton>
            </SidebarMenuSubItem>
          </SidebarMenuSub>
          </SidebarMenuItem>
        </SidebarMenu>
    </SidebarContent>
  </Sidebar>
    </SidebarProvider>
    `
  })
};

export const Small = {
  render: (args: any) => ({
    components: {
      Sidebar,
      SidebarContent,
      SidebarFooter,
      SidebarGroup,
      SidebarGroupLabel,
      SidebarHeader,
      SidebarInset,
      SidebarMenu,
      SidebarMenuAction,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarMenuSub,
      SidebarMenuSubButton,
      SidebarMenuSubItem,
      SidebarProvider,
      SidebarRail,
      SidebarTrigger,
      Frame,
      Globe,
      Map,
      MoreHorizontal,
      PieChart
    },
    setup() {
      const data = {
        projects: [
          {
            name: 'Design Engineering',
            url: '#',
            icon: Frame
          },
          {
            name: 'Sales & Marketing',
            url: '#',
            icon: PieChart
          },
          {
            name: 'Travel',
            url: '#',
            icon: Map
          }
        ]
      };
      return { args, data };
    },
    template: `
    <SidebarProvider size="small">
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem> Sidebar Header </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <Globe class="text-sidebar-foreground/70" />
                <span>Hello World</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem v-for="item in data.projects" :key="item.name">
              <SidebarMenuButton as-child>
                <a :href="item.url">
                  <component :is="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <MoreHorizontal class="text-sidebar-foreground/70" />
                <span>More</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem> Footer </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <header
      class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
    >
      <div class="flex items-center gap-2 px-4">
        <SidebarTrigger class="text-sidebar-foreground/90"  />
      </div>
    </header>
  </SidebarInset>
    </SidebarProvider>
    `
  })
};

export const Color = {
  render: (args: any) => ({
    components: {
      Sidebar,
      SidebarContent,
      SidebarFooter,
      SidebarGroup,
      SidebarGroupLabel,
      SidebarHeader,
      SidebarInset,
      SidebarMenu,
      SidebarMenuAction,
      SidebarMenuButton,
      SidebarMenuItem,
      SidebarMenuSub,
      SidebarMenuSubButton,
      SidebarMenuSubItem,
      SidebarProvider,
      SidebarRail,
      SidebarTrigger,
      Frame,
      Globe,
      Map,
      MoreHorizontal,
      PieChart
    },
    setup() {
      const data = {
        projects: [
          {
            name: 'Design Engineering',
            url: '#',
            icon: Frame
          },
          {
            name: 'Sales & Marketing',
            url: '#',
            icon: PieChart
          },
          {
            name: 'Travel',
            url: '#',
            icon: Map
          }
        ]
      };
      return { args, data };
    },
    template: `
    <SidebarProvider color="orange">
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <SidebarMenu>
          <SidebarMenuItem> Sidebar Header </SidebarMenuItem>
        </SidebarMenu>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Platform</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <Globe class="text-sidebar-foreground/70" />
                <span>Hello World</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>Projects</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem v-for="item in data.projects" :key="item.name">
              <SidebarMenuButton as-child>
                <a :href="item.url">
                  <component :is="item.icon" />
                  <span>{{ item.name }}</span>
                </a>
              </SidebarMenuButton>
            </SidebarMenuItem>
            <SidebarMenuItem>
              <SidebarMenuButton class="text-sidebar-foreground/70">
                <MoreHorizontal class="text-sidebar-foreground/70" />
                <span>More</span>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>
        <SidebarMenu>
          <SidebarMenuItem> Footer </SidebarMenuItem>
        </SidebarMenu>
      </SidebarFooter>
      <SidebarRail />
  </Sidebar>
  <SidebarInset>
    <header
      class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12"
    >
      <div class="flex items-center gap-2 px-4">
        <SidebarTrigger class="text-sidebar-foreground/90"  />
      </div>
    </header>
  </SidebarInset>
    </SidebarProvider>
    `
  })
};