import React from 'react';
import { storiesOf } from '@storybook/react';
import { withKnobs, boolean } from '@storybook/addon-knobs';

import round from '../helper';
import countyData from './DataTableCounty.json';
import townData from './DataTableTown.json';
import DataTable from './index';
import DataTableDocs from './DataTable.md';

/* eslint-disable react/prop-types */

storiesOf('dataviz|DataTable', module).addDecorator(withKnobs({ escapeHTML: false })).add('DataTable Simple', function () {
  var columns = [{
    Header: 'County',
    accessor: 'COUNTY'
  }, {
    Header: 'Trips started',
    accessor: 'ORIGIN_TRIPS', // String-based value accessors!
    className: 'data-align-right'
  }, {
    Header: 'Trips started per person',
    id: 'originTripsPerCap', // id is required for non string-based accessor
    accessor: function accessor(d) {
      return Math.round(d.ORIGIN_TRIPS_PER_PERSON * 100) / 100;
    },
    className: 'data-align-right'
  }];
  var isStriped = boolean('isStriped', true);
  var props = {
    data: countyData,
    columns: columns,
    defaultPageSize: 14,
    showPaginationBottom: false,
    className: isStriped ? '-striped' : null
  };
  return React.createElement(DataTable, props);
}, { info: DataTableDocs }).add('DataTable with Filter', function () {
  var columns = [{
    Header: 'Municipality',
    id: 'Municipality',
    accessor: 'TOWN',
    filterMethod: function filterMethod(filter, row) {
      return row[filter.id].startsWith(filter.value.toUpperCase());
    },
    Filter: function Filter(_ref) {
      var filter = _ref.filter,
          _onChange = _ref.onChange;
      return React.createElement('input', {
        placeholder: 'Enter a municipality name ...',
        value: filter ? filter.value : '',
        onChange: function onChange(event) {
          return _onChange(event.target.value);
        }
      });
    }
  }, {
    Header: 'Trips started',
    id: 'originTrips',
    accessor: function accessor(d) {
      return round(d.ORIGIN_TRIPS, 2);
    },
    className: 'data-align-right',
    Cell: function Cell(row) {
      return React.createElement(
        'div',
        null,
        row.value.toLocaleString()
      );
    }
  }, {
    Header: 'Trips started per person',
    id: 'originTripsPerCap',
    className: 'data-align-right',
    accessor: function accessor(d) {
      return Math.round(d.ORIGIN_TRIPS_PER_PERSON * 100) / 100;
    }
  }];
  var isStriped = boolean('isStriped', true);
  var props = {
    data: townData,
    filterable: boolean('filterable', true),
    columns: columns,
    defaultPageSize: 10,
    defaultSorted: [{
      id: 'originTrips',
      desc: true
    }],
    className: isStriped && '-striped',
    showPaginationBottom: true
  };
  return React.createElement(DataTable, props);
}, { info: DataTableDocs });