import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import styled from '@emotion/styled';
import Layout from '../layout';
import PageLayout from '.';
import Heading from '../heading';
import IconButton from '../icon-button';
import ContextMenuButton from '../context-menu-button';
import MainButton from '../main-button';
import SearchInput from '../search-input';
import Paging from '../paging';
import withReadme from 'storybook-readme/with-readme';
import { boolean, withKnobs } from '@storybook/addon-knobs/react';
import Readme from './README.md';

const HeaderContent = styled.div`
  display: flex;
  align-items: center;

  & > * {
    margin-right: 8px !important;
  }
`;

const pageItems = [
  {
    key: '1',
    label: '1 of 2',
    onClick: (e) => action('set paging 1 of 2')(e)
  },
  {
    key: '2',
    label: '2 of 2',
    onClick: (e) => action('set paging 2 of 2')(e)
  }
];

const perPageItems = [
  {
    key: '1-1',
    label: '25 per page',
    onClick: (e) => action('set paging 25 action')(e)
  },
  {
    key: '1-2',
    label: '50 per page',
    onClick: (e) => action('set paging 50 action')(e)
  }
];

const StyledHeading = styled(Heading)`
  margin: 0;
  line-height: 56px;
  font-weight: 700;
`;

const articleHeaderContent = <StyledHeading size="xlarge">Article Header</StyledHeading>;

const articleMainButtonContent = <MainButton
  text='Actions'
  clickAction={(e) => action('MainButton Clicked')(e)}
/>;

const articleBodyContent = <p style={{ padding: 40 }}>Article Content</p>;

const sectionHeaderContent = <HeaderContent>
  <IconButton
    iconName={"ArrowPathIcon"}
    size='16'
    onClick={(e) => action('ArrowPathIcon Clicked')(e)}
  />
  <StyledHeading size='medium'>Section Header</StyledHeading>
  <IconButton
    iconName={"PlusIcon"}
    size='16'
    onClick={(e) => action('PlusIcon Clicked')(e)}
  />
  <ContextMenuButton
    title="Actions"
    getData={() => [
      {
        key: 'key',
        label: 'label',
        onClick: (e) => action('label Clicked')(e)
      }
    ]}
  />
</HeaderContent>;

const sectionFilterContent = <SearchInput
  isNeedFilter={true}
  getFilterData={() => [
    {
      key: 'filter-example',
      group: 'filter-example',
      label: 'example group',
      isHeader: true
    },
    {
      key: 'filter-example-test',
      group: 'filter-example',
      label: 'Test'
    }
  ]}
  onSearchClick={(result) => { console.log(result) }}
  onChangeFilter={(result) => { console.log(result) }}
/>

const sectionBodyContent = <p style={{ padding: 40 }}>Section Content</p>;

const sectionPagingContent = <Paging
  previousLabel="Previous"
  nextLabel="Next"
  pageItems={pageItems}
  perPageItems={perPageItems}
  selectedPageItem={pageItems[0]}
  selectedCountItem={perPageItems[0]}
  onSelectPage={(a) => console.log(a)}
  onSelectCount={(a) => console.log(a)}
  previousAction={(e) => action('Prev Clicked')(e)}
  nextAction={(e) => action('Next Clicked')(e)}
  openDirection="top"
/>

storiesOf('Components|PageLayout', module)
  .addDecorator(withKnobs)
  .addDecorator(withReadme(Readme))
  .add('base', () => (
    <Layout
      isBackdropVisible={boolean("isBackdropVisible", false)}
      isNavHoverEnabled={boolean("isNavHoverEnabled", true)}
      isNavOpened={boolean("isNavOpened", false)}
      isAsideVisible={boolean("isAsideVisible", false)}
    >
      <PageLayout
        articleHeaderContent={articleHeaderContent}
        articleMainButtonContent={articleMainButtonContent}
        articleBodyContent={articleBodyContent}
        sectionHeaderContent={sectionHeaderContent}
        sectionFilterContent={sectionFilterContent}
        sectionBodyContent={sectionBodyContent}
        sectionPagingContent={sectionPagingContent}
      />
    </Layout>

  ));