import React, {Fragment} from 'react';
import {storiesOf} from '@storybook/react';

import {
  Burger, Bell, Star, Money, User, Case, COLOR, SIZE,
} from '../../Components/Icon/src';
import Header, {themes} from '../../Components/Header';

function HeaderPreview({theme}) {
  const userMenu = [
    <div>
      My Profile
    </div>,
    // eslint-disable-next-line jsx-a11y/anchor-is-valid
    <a href="#">
      Logout
    </a>,
  ];

  const dailyEarned = [
    {
      date: '2019-08-19',
      value: 0.4402,
    },
    {
      date: '2019-08-20',
      value: 0.6958,
    },
    {
      date: '2019-08-21',
      value: 0.8238,
    },
    {
      date: '2019-08-22',
      value: 2.6855,
    },
    {
      date: '2019-08-23',
      value: 1.0553,
    },
    {
      date: '2019-08-24',
      value: 0.0211,
    },
    {
      date: '2019-08-25',
      value: 0.0169,
    },
  ];

  const maxValue = dailyEarned.reduce((max, day) => Math.max(max, day.value), 1);

  const newDailyEarned = dailyEarned.map((item) => ({
    ...item,
    percentage: (item.value / maxValue) * 100,
  }));

  const customComponent = (
    <>
      <Bell size={SIZE.MEDIUM_SMALL} color="#b3b3b3" />
      <div style={{position: 'absolute', top: '10px', right: '10px'}}>
        <Star size={SIZE.EXTRA_SMALL} color={COLOR.ERROR} />
      </div>
    </>
  );

  const logo = (<div>🐰🐰🐰</div>);

  const SidebarButton = (
    <Header.HeaderItem
      onClick={() => alert('Sidebar has been opened')}
      component={<Burger color={COLOR.GRAY} />}
    />
  );

  return (
    <Header
      theme={themes[theme]}
      logo={logo}
      sidebarButton={SidebarButton}
    >
      <Header.HeaderBalance
        balance={123456789.99}
        dailyEarned={newDailyEarned}
      />

      <Header.HeaderItem
        onClick={() => alert('Single notification has been shown')}
        component={customComponent}
      />

      <Header.HeaderDivider />

      <Header.HeaderItem icon={<Case size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY} />}>
        <Header.HeaderDropdown>
          <button
            type="button"
            onClick={(e) => {
              e.stopPropagation();
              alert('Clicked');
            }}
            style={{padding: '40px'}}
          >
            <Money
              size={SIZE.EXTRA_LARGE}
              color={COLOR.ERROR}
            />
          </button>
        </Header.HeaderDropdown>
      </Header.HeaderItem>

      <Header.HeaderDivider />

      <Header.HeaderItem
        id="user-menu-button"
        isRightDropdown
        title="Some text"
        icon={<User size={SIZE.MEDIUM_SMALL} color={COLOR.GRAY} />}
      >
        <Header.HeaderDropdown id="user-menu">
          <Header.HeaderDropdownList items={userMenu} />
        </Header.HeaderDropdown>
      </Header.HeaderItem>

      <Header.HeaderDivider />
      <Header.HeaderTime />
    </Header>
  );
}

export default storiesOf('Layout | Header', module)
  .add('light', () => (
    <HeaderPreview theme={themes.light.name} />
  ))
  .add('dark', () => (
    <HeaderPreview theme={themes.dark.name} />
  ));