import type { Meta, StoryObj } from '@storybook/vue3'
import {
  USidebar,
  UApp,
  UIcon,
  UInput,
  USidebarLogo,
  UAvatarGroup,
  UAvatar,
  UListItemGroup,
  UListItem,
  UCard,
} from '../components'
import { USidebarProps } from '../components/USidebar/USidebar'
import { ExtractPropTypes, ref, Transition } from 'vue'

const meta: Meta<typeof USidebar> = {
  title: 'Example/Sidebar',
  component: USidebar,
  tags: ['autodocs'],
  argTypes: {
    variant: { control: 'select', options: ['primary', 'gray'] },
    style: { control: 'select', options: ['simple', 'dual-tier', 'slim'] },
    theme: { control: 'select', options: ['light', 'dark'] },
    location: { control: 'select', options: ['left', 'right', 'top'] },
    transitionDuration: {
      control: 'select',
      options: ['0', '75', '100', '150', '200', '300', '500', '700', '1000'],
    },
    border: { control: 'boolean', defaultValue: false },
    elevation: { control: 'boolean', defaultValue: false },
  },
}

export default meta

type Story = StoryObj<typeof USidebar>

export const TemporaryDrawer: Story = {
  render: (args: ExtractPropTypes<USidebarProps>) => ({
    components: { USidebar, UApp, UIcon, USidebarLogo, UInput, UAvatarGroup },
    setup() {
      const drawer = ref(false)
      const toggleDrawer = () => {
        drawer.value = !drawer.value
      }
      return { args, drawer, toggleDrawer }
    },
    template: `<UApp>
    <div class="flex justify-between items-center py-3 pl-3 pr-2">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" fill="none">
        <path d="M12.6691 7.85581L10.1544 5.30603C8.45849 7.01822 7.40747 9.38695 7.40747 12.0004C7.40747 14.6142 8.46057 16.9774 10.1544 18.6975L12.6691 16.1443C12.0315 15.4964 11.5398 14.6969 11.2529 13.8057H20.7481C20.4613 14.6969 19.9695 15.4964 19.3299 16.1443L21.8466 18.6975C23.5438 16.9774 24.5912 14.6142 24.5912 12.0004C24.5912 9.38695 23.5438 7.01822 21.8466 5.30603L19.3299 7.85581C19.9695 8.50337 20.4613 9.30449 20.7481 10.1955H11.2529C11.5398 9.30449 12.0315 8.50337 12.6691 7.85581Z" fill="#101828"/>
        <path d="M24.5651 2.55084C26.9582 4.97217 28.4359 8.31461 28.4359 12.0004C28.4359 15.6862 26.9582 19.0299 24.5651 21.4447L27.0813 24C30.1209 20.924 32 16.6802 32 12.0004C32 7.31976 30.1209 3.07681 27.0813 0L24.5651 2.55084ZM7.4328 2.55084L4.91631 0C1.88123 3.07681 0 7.31976 0 12.0004C0 16.6802 1.88123 20.924 4.91631 24L7.43724 21.4492C5.0442 19.0299 3.56411 15.6862 3.56411 12.0004C3.56411 8.31567 5.0442 4.97217 7.4328 2.55084Z" fill="#101828"/>
      </svg>
      <UIcon @click="toggleDrawer" size="24" color="gray-500">$menu2</UIcon>
    </div>
    <USidebar
      variant="primary"
      theme="light"
      :absolute="true" 
      v-model="drawer"
      location="left"
      temporary  
      class="flex flex-col justify-between"
      v-bind="args">
          <div class="mt-4 flex flex-col gap-5">
            <div class="mx-4"><USidebarLogo></USidebarLogo></div>
            <UInput v-model="args.modelValue" placeholder="Search" prependIcon="searchLg"></UInput>
            <ul class="cursor-pointer text-text-md text-gray-700 font-semibold overflow-hidden flex flex-col gap-1 px-2">
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$homeLine</UIcon>
                <span>Home</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$barChartSquare2</UIcon>
                <span>Dashboard</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$layersThree1</UIcon>
                <span>Projects</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$checkDone1</UIcon>
                <span>Tasks</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$users1</UIcon>
                <span>Users</span>
              </li>
            </ul>
          </div>
          <footer class="flex flex-col gap-5 px-2 mb-6">
            <ul class="cursor-pointer text-text-md text-gray-700 font-semibold overflow-hidden flex flex-col gap-1">
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$lifeBuoy1</UIcon>
                <span>Support</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="gray-500" size="24">$settings1</UIcon>
                <span>Settings</span>
              </li>
            </ul>
            <UAvatarGroup imagePath="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd5KqiP_7htmin1ZO_xz4J9ZGEFums_SeuuuqQbqce4n4KAND-etj0j4opK_2TSPhdNIQ&usqp=CAU" profileName="Olivia Rhye" profileText="olivia@untitledui.com"></UAvatarGroup>
          </footer>
      </USidebar>
  </UApp>`,
  }),
  args: {} as USidebarProps,
}

export const ExpandOnHoverDrawer: Story = {
  render: (args: ExtractPropTypes<USidebarProps>) => ({
    components: { USidebar, UApp, UIcon, UAvatar },
    setup() {
      const drawer = ref(false)
      return { args, drawer }
    },
    template: `<UApp>
    <USidebar
      v-model="drawer"
      variant="gray"
      theme="dark"
      :absolute="true"
      location="left"
      expand-on-hover
      rail
      railWidth="78"
      v-bind="args">
        <div class="mt-4 flex flex-col items-center gap-5 px-4">
          <ul class="cursor-pointer text-text-md text-gray-700 font-semibold overflow-hidden flex flex-col gap-2 px-2">
            <li>
              <svg class="fill-gray-900" xmlns="http://www.w3.org/2000/svg" width="32" height="24" viewBox="0 0 32 24" fill="none">
                <path d="M12.6691 7.85581L10.1544 5.30603C8.45849 7.01822 7.40747 9.38695 7.40747 12.0004C7.40747 14.6142 8.46057 16.9774 10.1544 18.6975L12.6691 16.1443C12.0315 15.4964 11.5398 14.6969 11.2529 13.8057H20.7481C20.4613 14.6969 19.9695 15.4964 19.3299 16.1443L21.8466 18.6975C23.5438 16.9774 24.5912 14.6142 24.5912 12.0004C24.5912 9.38695 23.5438 7.01822 21.8466 5.30603L19.3299 7.85581C19.9695 8.50337 20.4613 9.30449 20.7481 10.1955H11.2529C11.5398 9.30449 12.0315 8.50337 12.6691 7.85581Z"/>
                <path d="M24.5651 2.55084C26.9582 4.97217 28.4359 8.31461 28.4359 12.0004C28.4359 15.6862 26.9582 19.0299 24.5651 21.4447L27.0813 24C30.1209 20.924 32 16.6802 32 12.0004C32 7.31976 30.1209 3.07681 27.0813 0L24.5651 2.55084ZM7.4328 2.55084L4.91631 0C1.88123 3.07681 0 7.31976 0 12.0004C0 16.6802 1.88123 20.924 4.91631 24L7.43724 21.4492C5.0442 19.0299 3.56411 15.6862 3.56411 12.0004C3.56411 8.31567 5.0442 4.97217 7.4328 2.55084Z"/>
              </svg>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$homeLine</UIcon>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$barChartSquare2</UIcon>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$layersThree1</UIcon>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$checkDone1</UIcon>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$users1</UIcon>
            </li>
          </ul>
        </div>
        <footer class="flex flex-col items-center gap-5 px-4 mb-6">
          <ul class="cursor-pointer text-text-md text-gray-700 font-semibold overflow-hidden flex flex-col gap-2">
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$lifeBuoy1</UIcon>
            </li>
            <li class="flex justify-start items-center gap-3">
              <UIcon color="gray-300" size="24">$settings1</UIcon>
            </li>
          </ul>
          <UAvatar imagePath="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd5KqiP_7htmin1ZO_xz4J9ZGEFums_SeuuuqQbqce4n4KAND-etj0j4opK_2TSPhdNIQ&usqp=CAU"></UAvatar>
        </footer>
      </USidebar>
  </UApp>`,
  }),
  args: {
    //
  } as USidebarProps,
}

export const PermanentDrawer: Story = {
  render: (args: ExtractPropTypes<USidebarProps>) => ({
    components: { USidebar, UApp, UIcon, UInput, USidebarLogo, UAvatarGroup },
    setup() {
      const drawer = ref(false)
      return { args, drawer }
    },
    template: `<UApp>
    <USidebar
      variant="primary"
      theme="dark"
      :absolute="true" 
      v-model="drawer"
      location="left"
      floating
      sticky
      class="flex flex-col justify-between"
      v-bind="args">
          <div class="mt-4 flex flex-col gap-5">
            <div class="mx-4"><USidebarLogo color="white"></USidebarLogo></div>
            <UInput v-model="args.modelValue" placeholder="Search" prependIcon="searchLg"></UInput>
            <ul class="cursor-pointer text-text-md text-primary-100 font-semibold overflow-hidden flex flex-col gap-1 px-2">
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$homeLine</UIcon>
                <span>Home</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$barChartSquare2</UIcon>
                <span>Dashboard</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$layersThree1</UIcon>
                <span>Projects</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$checkDone1</UIcon>
                <span>Tasks</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$users1</UIcon>
                <span>Users</span>
              </li>
            </ul>
          </div>
          <footer class="flex flex-col gap-5 px-2 mb-6">
            <ul class="cursor-pointer text-text-md text-primary-100 font-semibold overflow-hidden flex flex-col gap-1">
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$lifeBuoy1</UIcon>
                <span>Support</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$settings1</UIcon>
                <span>Settings</span>
              </li>
            </ul>
            <UAvatarGroup imagePath="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd5KqiP_7htmin1ZO_xz4J9ZGEFums_SeuuuqQbqce4n4KAND-etj0j4opK_2TSPhdNIQ&usqp=CAU" profileName="Olivia Rhye" profileText="olivia@untitledui.com"></UAvatarGroup>
          </footer>
      </USidebar>
  </UApp>`,
  }),
  args: {
    //
  } as USidebarProps,
}

export const PermanentTopDrawer: Story = {
  render: (args: ExtractPropTypes<USidebarProps>) => ({
    components: { USidebar, UApp, USidebarLogo, UAvatar, UIcon },
    setup() {
      const drawer = ref(false)
      return { args, drawer }
    },
    template: `<UApp>
    <USidebar
      v-model="drawer"
      variant="primary"
      theme="dark"
      :absolute="true"
      location="top"
      floating
      sticky
      class="flex flex-col justify-between py-3"
      v-bind="args">
          <div class="flex gap-5">
            <div class="mx-4"><USidebarLogo color="white"></USidebarLogo></div>
            <ul class="cursor-pointer text-text-md text-primary-100 font-semibold overflow-hidden flex gap-2 px-2">
              <li class="flex justify-start items-center gap-3">
                <span>Home</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <span>Dashboard</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <span>Projects</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <span>Tasks</span>
              </li>
              <li class="flex justify-start items-center gap-3">
                <span>Users</span>
              </li>
            </ul>
          </div>
          <footer class="flex gap-5 px-2">
            <ul class="cursor-pointer text-text-md text-primary-100 font-semibold overflow-hidden flex gap-1">
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$lifeBuoy1</UIcon>
              </li>
              <li class="flex justify-start items-center gap-3">
                <UIcon color="primary-100" size="24">$settings1</UIcon>
              </li>
            </ul>
            <UAvatar imagePath="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTd5KqiP_7htmin1ZO_xz4J9ZGEFums_SeuuuqQbqce4n4KAND-etj0j4opK_2TSPhdNIQ&usqp=CAU"></UAvatar>
          </footer>
    </USidebar>
  </UApp>`,
  }),
  args: {
    //
  } as USidebarProps,
}

export const GuestListSidebar: Story = {
  render: (args: USidebarProps) => ({
    components: {
      USidebar,
      UApp,
      UIcon,
      UListItemGroup,
      UListItem,
      UCard,
      Transition,
    },
    setup() {
      const rail = ref(true)
      const cardIsVisible = ref(true)
      const currentItemId = ref('')

      const listItems = [
        {
          title: 'Overview',
          badge: 0,
          itemId: 'overviewScreen',
          prependIcon: 'activity',
        },
        {
          title: 'Notifications',
          badge: 10,
          itemId: 'notificationsScreen',
          prependIcon: 'notificationBox',
        },
        {
          title: 'Analytics',
          itemId: 'analyticsScreen',
          prependIcon: 'barLineChart',
        },
        {
          title: 'Saved reports',
          itemId: 'savedReportssScreen',
          prependIcon: 'star1',
        },
        {
          title: 'Scheduled reports',
          itemId: 'scheduledReportsScreen',
          prependIcon: 'clockFastForward',
        },
      ]

      const currentItemIdChange = (index: string) => {
        if (currentItemId.value != index) {
          currentItemId.value = index
        } else {
          currentItemId.value = ''
        }
      }

      const listItemClick = (e: MouseEvent) => {
        console.log(e)
      }

      const hideCard = () => {
        cardIsVisible.value = false
      }

      return {
        args,
        currentItemId,
        currentItemIdChange,
        listItemClick,
        rail,
        hideCard,
        cardIsVisible,
        listItems,
      }
    },
    template: `<UApp style="height: 600px;">
    <USidebar
      variant="primary"
      theme="light"
      :absolute="true" 
      :rail="rail"
      railWidth="80"
      permament
      location="left"
      :transition-duration="1000"
      class="flex flex-col justify-between px-4 overflow-auto"
    >
        <div class='flex flex-col justify-between items-center'>
          <div :class="rail ? 'flex items-center justify-center w-full py-5' : 
            'flex items-center justify-between w-full py-5'" style="min-height: 72px;">
            <Transition>
              <svg
                v-if="!rail"
                width="142"
                height="32"
                viewBox="0 0 142 32"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path d="M11.5443 12.2117L9.25354 9.87946C7.70864 11.4456 6.75122 13.6122 6.75122 16.0027C6.75122 18.3935 7.71054 20.555 9.25354 22.1284L11.5443 19.793C10.9634 19.2004 10.5155 18.4691 10.2542 17.6539H18.9038C18.6425 18.4691 18.1946 19.2004 17.6119 19.793L19.9045 22.1284C21.4506 20.555 22.4047 18.3935 22.4047 16.0027C22.4047 13.6122 21.4506 11.4456 19.9045 9.87946L17.6119 12.2117C18.1946 12.804 18.6425 13.5368 18.9038 14.3517H10.2542C10.5155 13.5368 10.9634 12.804 11.5443 12.2117Z" />
                <path d="M22.381 7.35933C24.5609 9.57408 25.907 12.6314 25.907 16.0027C25.907 19.374 24.5609 22.4325 22.381 24.6412L24.6731 26.9785C27.442 24.1649 29.1538 20.2832 29.1538 16.0027C29.1538 11.7214 27.442 7.84043 24.6731 5.02612L22.381 7.35933ZM6.77431 7.35933L4.48192 5.02612C1.71712 7.84043 0.00341797 11.7214 0.00341797 16.0027C0.00341797 20.2832 1.71712 24.1649 4.48192 26.9785L6.77835 24.6453C4.59842 22.4325 3.25014 19.374 3.25014 16.0027C3.25014 12.6323 4.59842 9.57408 6.77431 7.35933Z" />
                <path d="M132.323 15.7784L133.68 13.2498L135.021 15.7784H132.323ZM129.272 21.9535L130.844 18.8304H136.489L138.197 21.9535L141.343 22L136.918 13.0582C136.426 12.0551 136.008 11.3617 135.672 10.9779C135.126 10.3498 134.479 10.0341 133.727 10.0341C132.958 10.0341 132.293 10.3249 131.739 10.9131C131.348 11.3185 130.916 12.0056 130.441 12.9777L126.019 22L129.272 21.9535ZM122.164 10H107.908V13.0271H121.875L109.694 15.7942C109.017 15.9429 108.468 16.2802 108.054 16.8094C107.636 17.3354 107.431 17.9639 107.431 18.6883C107.431 19.6259 107.794 20.4061 108.525 21.025C109.222 21.6099 110.04 21.904 110.976 21.904H124.678V18.7843H111.268L122.814 16.1439C123.541 15.9736 124.132 15.6301 124.57 15.1133C125.015 14.5965 125.235 13.9622 125.235 13.219C125.235 12.2994 124.931 11.5353 124.331 10.9226C123.729 10.3062 123.01 10 122.164 10ZM93.7092 10C93.0716 10 92.5332 10.0711 92.0918 10.2077C91.6475 10.3498 91.2224 10.6193 90.8109 11.0182C90.3995 11.4174 90.1074 11.8353 89.9313 12.2748C89.7584 12.711 89.672 13.2285 89.672 13.8255V18.162C89.672 18.6726 89.7376 19.1 89.8794 19.4498C90.0177 19.7962 90.2626 20.1801 90.6112 20.6071C91.0138 21.1118 91.4552 21.4678 91.9439 21.6814C92.4361 21.8916 93.0116 22 93.6796 22H105.641V18.8304H92.645V17.5676L105.641 17.5335V14.4478H92.5674V13.0582H105.641V10H93.7092ZM72.1134 10.0494V13.1044H78.7257L78.7867 21.9535H81.6702L81.6554 13.0582H88.2811V10.0494H72.1134ZM57.529 18.911H67.6122V13.1692H57.529V18.911ZM69.7864 11.5507C70.0722 11.9159 70.2811 12.2748 70.4092 12.6341C70.5404 12.9897 70.6046 13.4014 70.6046 13.875V18.2887C70.6046 18.7997 70.5196 19.2483 70.3481 19.6322C70.1798 20.016 69.9067 20.4061 69.5295 20.802C69.1569 21.1953 68.7783 21.477 68.392 21.6473C68.0059 21.8176 67.5349 21.904 66.9799 21.904H58.2092C57.6023 21.904 57.0939 21.811 56.6839 21.6224C56.2725 21.4367 55.8727 21.1148 55.4821 20.6569C55.1511 20.2698 54.9218 19.886 54.7874 19.4959C54.6547 19.1091 54.5876 18.6451 54.5876 18.1096V13.6029C54.5876 13.0795 54.6981 12.6092 54.9243 12.1942C55.1215 11.8324 55.4285 11.4606 55.8431 11.0834C56.2577 10.7025 56.6811 10.4395 57.1059 10.2974C57.5321 10.1546 58.0406 10.0806 58.6235 10.0806H67.0293C67.6122 10.0806 68.1266 10.2011 68.5694 10.4395C69.008 10.6812 69.4166 11.0523 69.7864 11.5507Z" />
                <path d="M49.6627 14.8487H39.0365C39.3194 13.7372 39.8968 12.7469 40.672 11.999L38.7118 10C37.081 11.6669 36.0669 13.9609 36.0669 16.5031C36.0669 19.0362 37.081 21.3331 38.7118 23L40.7617 20.9081C39.9289 20.1382 39.3137 19.1045 39.0243 17.928H49.6717C49.3837 19.1012 48.7671 20.1349 47.9386 20.9081L49.9946 23C51.6225 21.3331 52.6381 19.0362 52.6381 16.5031C52.6381 13.9609 51.6225 11.6669 49.9946 10L48.0283 12.0019C48.8006 12.7535 49.378 13.7372 49.6627 14.8487Z" />
              </svg>
            </Transition>
            <UIcon @click.stop="rail = !rail" size="24" color="gray-500">$menu2</UIcon>
          </div>
          <div :class="rail ? 'w-full flex flex-col gap-1 relative items-center' : 
          'w-full flex flex-col gap-1 relative'">
            <UListItem
                itemId="dashboard"
                :isActive="currentItemId == 'guestListScreen'"
                prependIcon="pieChart1"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >
              Dashboard
            </UListItem>
            <UListItem
                itemId="guestList"
                :isActive="currentItemId == 'messagesScreen'"
                prependIcon="user1"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >Guest List</UListItem>
            <UListItem
                itemId="messages"
                :isActive="currentItemId == 'messagesScreen'"
                :badge="rail ? null : 2"
                prependIcon="annotationDots"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >Messages</UListItem>
            <UListItem
                itemId="serviceRequests"
                :isActive="currentItemId == 'messagesScreen'"
                prependIcon="tool1"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >Service Requests</UListItem>
            <UListItem
                itemId="shopOrders"
                :isActive="currentItemId == 'messagesScreen'"
                :badge="rail ? null : 29"
                prependIcon="shoppingBag3"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >Shop Orders</UListItem>
            <UListItemGroup 
                :listItems="listItems"
                prependIcon= "codeSquare1"
                :currentItemId="currentItemId" 
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
            >Application</UListItemGroup>
          </div>
        </div>
        <footer :class="rail ? 'flex flex-col items-center' : 'flex flex-col gap-6'">
            <UCard
              v-if="cardIsVisible && !rail"
              color="gray-200"
              rounded="md"
              class="px-4 py-5"
            >
              <div class="flex flex-col gap-1 text-text-sm text-gray-800">
                <div class="flex justify-between">
                  <span class="font-semibold">Connect my Device: Manage The Inputs List</span>
                  <div class="cursor-pointer" @click="hideCard">
                    <UIcon size="20" color="gray-800">$xClose</UIcon>
                  </div>
                </div>
                <span class="font-regular">From now on you can manage the inputs list according...
                </span>
              </div>
            </UCard>
            <div class="w-full">
              <UListItem
                itemId="customPortal"
                :isActive="currentItemId == 'messagesScreen'"
                prependIcon="bookOpen2"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
              >
                Customer portal
              </UListItem>
              <UListItem
                itemId="supportCenter"
                :isActive="currentItemId == 'messagesScreen'"
                prependIcon="lifeBuoy1"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
              >
                Support center
              </UListItem>
              <UListItem
                itemId="whatsNew"
                :isActive="currentItemId == 'messagesScreen'"
                prependIcon="notificationText"
                @currentItemId="currentItemIdChange"
                @click="listItemClick"
              >
                What's new
              </UListItem>
            </div>
        </footer>
      </USidebar>
  </UApp>`,
  }),
  args: {
    currentItemId: '',
  } as USidebarProps,
}