import React from 'react';
import { customRender } from 'test-utils';

import { Icon } from '@lightspeed/flame/Icon';
import {
  Sidebar,
  SidebarHeader,
  SidebarAppSwitcher,
  SidebarShopButton,
  SidebarDropdownButton,
  SidebarAccountDropdown,
  SidebarMenu,
  SidebarMenuItem,
  SidebarItem,
  SidebarNotificationBadge,
  SidebarNav,
  SidebarFooter,
  SidebarFooterItem,
} from '.';

const items = [
  { icon: <Icon name="home" />, children: 'Home', href: '/', active: true },
  {
    icon: <Icon name="orders" />,
    children: 'Item with notifications',
    href: 'orders',
    hasSublevel: true,
    notifications: <SidebarNotificationBadge>2</SidebarNotificationBadge>,
  },
  {
    icon: <Icon name="blogs" />,
    children: 'Item with onClick',
    href: 'blogs',
    onClick: (e: React.MouseEvent<HTMLElement>) => {
      e.preventDefault();
    },
    hasSublevel: true,
  },
  {
    icon: <Icon name="blogs" />,
    children: 'Item with disabled',
    href: 'some-route',
    disabled: true,
  },
];

const sidebar: React.FC<{ isAccountMenuOpen: boolean }> = ({ isAccountMenuOpen }) => (
  <Sidebar>
    <SidebarHeader>
      <SidebarAppSwitcher
        currentProduct="ecom"
        canSwitchTo={[{ name: 'retail', href: '/retail' }]}
      />

      <SidebarShopButton>
        <div>SidebarShopButton Content</div>
      </SidebarShopButton>

      <SidebarAccountDropdown
        isOpen={isAccountMenuOpen}
        target={({ targetProps, targetEvents }) => (
          <SidebarDropdownButton {...targetProps} {...targetEvents} active={isAccountMenuOpen}>
            Awesome Merchant
          </SidebarDropdownButton>
        )}
      >
        <SidebarMenu>
          <SidebarMenuItem href="#">Tasks</SidebarMenuItem>
          <SidebarMenuItem href="#">My Account</SidebarMenuItem>
          <SidebarMenuItem href="#" danger>
            Logout
          </SidebarMenuItem>
        </SidebarMenu>
      </SidebarAccountDropdown>
    </SidebarHeader>

    <SidebarNav>
      <ul>
        {items.map(item => (
          <SidebarItem key={item.href} {...item} />
        ))}
      </ul>
    </SidebarNav>

    <SidebarFooter>
      <SidebarFooterItem
        icon={<Icon name="help" />}
        href="#"
        target="_blank"
        rel="noopener noreferrer"
      >
        Help
      </SidebarFooterItem>

      <SidebarFooterItem
        icon={<Icon name="search" />}
        href="#"
        target="_blank"
        rel="noopener noreferrer"
      >
        Search
      </SidebarFooterItem>
    </SidebarFooter>
  </Sidebar>
);

describe('<Sidebar />', () => {
  it('should render', () => {
    const { container } = customRender(sidebar({ isAccountMenuOpen: false }));
    expect(container).not.toBeUndefined();
  });
});