import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import CheckedTable from './CheckedTable';
import { PaginationComponent } from './PaginationComponent';
import CheckedTableWithScroll from './CheckedTableWithScroll';
import RadioButtonTable from './TableWithRadioButton';
import {
  text,
  boolean,
  number,
  object,
  array,
  selectV2,
  date,
  color,
  button
} from '@storybook/addon-knobs/react';
import { withInfo } from '@storybook/addon-info';
import { linkTo } from '@storybook/addon-links'
import styled from 'styled-components';
import { Row } from '../baseComponents'

const columns = [{
  Header: 'Name',
  id: 'name',
  accessor: props => props.name,
},
{
  Header: 'Age',
  id: 'age',
  accessor: props => props.age
},
{
  Header: 'Pet',
  id: 'pet',
  accessor: props => props.pet
}]

const pageData = page => {
  return ([
    { name: 'Jack', age: page * 11, pet: 'spider', enabled: true },
    { name: 'Jane', age: page * 10, pet: 'dog', enabled: false },
    { name: 'Jason', age: page * 11, pet: 'cat', enabled: true },
    { name: 'Jack', age: page * 11, pet: 'spider', enabled: true },
    { name: 'Jane', age: page * 10, pet: 'dog', enabled: false },
    { name: 'Jason', age: page * 11, pet: 'cat', enabled: true },
    { name: 'Jack', age: page * 11, pet: 'spider', enabled: true },
    { name: 'Jane', age: page * 10, pet: 'dog', enabled: false },
    { name: 'Jason', age: page * 11, pet: 'cat', enabled: true },
    { name: 'Jack', age: page * 11, pet: 'spider', enabled: true },
    { name: 'Jane', age: page * 10, pet: 'dog', enabled: false },
    { name: 'Jason', age: page * 11, pet: 'cat', enabled: true },
  ])
}

class Wrap extends React.Component {
  constructor() {
    super()
    this.state = {
      data: [],
      page: 1,
      loading: false
    }
  }

  componentDidMount() {
    this.getData(1)
  }

  getData = page => {
    this.setState({ loading: true })
    setTimeout(() => this.setState({
      data: pageData(page),
      page,
      loading: false
    }), 2000)
  }

  render() {
    return (
      <CheckedTable
        loading={this.state.loading}
        {...this.props}
        checkBoxWidth={number('Check Box Width', 50)}
        data={this.state.data}
        columns={columns}
        pages={5}
        page={this.state.page}
        pageSize={3}
        fetchData={pgNo => this.getData(pgNo)}
      />
    )
  }
}

storiesOf('Paginated Checked Table', module)
  .add('Simple Table with serial No.s',
    withInfo('Use prop serialNoWidth to specify presence of serial No.s')(
      () => (
        <CheckedTable
          serialNoWidth={number('Serial Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          defaultPageSize={3}
        />
      )
    ))
  .add('Simple Checked Table with a primary key',
    withInfo('If each row object has a primary key')(
      () => (
        <CheckedTable
          checkBoxWidth={number('Check Box Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          defaultPageSize={3}
          primaryKey={'name'}
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Simple Checked Table with no primary key',
    withInfo('Use if the row object has no primary key , treats the serial No as primary Key')(
      () => (
        <CheckedTable
          checkBoxWidth={number('Check Box Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          defaultPageSize={3}
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Simple Checked Table with disabled rows',
    withInfo('Use enabled key to specify which property in the row object needs to have an enabled checkbox')(
      () => (
        <CheckedTable
          checkBoxWidth={number('Check Box Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          primaryKey={'name'}
          defaultPageSize={3}
          enabledKey={'enabled'}
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Simple Checked Table with all rows disabled',
    withInfo('Use enableAll to disable all (checkBoxWidth==undefined to hide all)')(
      () => (
        <CheckedTable
          enableAll={boolean('enableAll', false)}
          checkBoxWidth={number('Check Box Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          primaryKey={'name'}
          defaultPageSize={3}
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Paginated Checked Table with Serial No.s',
    withInfo('A paginated table which caches data. The Wrap component below mocks requests')(
      () => (
        <Wrap
          serialNoWidth={number('Serial Box Width', 50)}
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Paginated Checked Table with no Caching',
    withInfo('A paginated table which caches data. The Wrap component below mocks requests')(
      () => (
        <Wrap
          noCache
          getSelectedRows={action('Selected Rows')}
        />
      )
    ))
  .add('Paginated Checked Table with Pagination Component',
    withInfo('A custom pagination component added to the table')(
      () => (
        <Wrap
          getSelectedRows={action('Selected Rows')}
          showPagination
          PaginationComponent={PaginationComponent}
        />
      )
    ))
  .add('Simple Checked Table with scroll and no pagination',
    withInfo('The page size is automatically set according to length of the array and pagination is always false and you can pass the hieght of the table body')(
      () => (
        <CheckedTableWithScroll
          checkBoxWidth={number('Check Box Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          getSelectedRows={action('Selected Rows')}
          height={200}
        />
      )
    ))
  .add('Simple table with Radio button',
    withInfo('The page size is automatically set according to length of the array and pagination is always false and you can pass the hieght of the table body and you can select only one rowat a time')(
      () => (
        <RadioButtonTable
          radioBoxWidth={number('Radio Button Width', 50)}
          data={object('Data', pageData(1))}
          columns={columns}
          getSelectedRow={action('Selected Row')}
          height={200}
        />
      )
    ))