'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _react3 = require('@storybook/react');

var _addonKnobs = require('@storybook/addon-knobs');

var _helper = require('../helper');

var _helper2 = _interopRequireDefault(_helper);

var _DataTableCounty = require('./DataTableCounty.json');

var _DataTableCounty2 = _interopRequireDefault(_DataTableCounty);

var _DataTableTown = require('./DataTableTown.json');

var _DataTableTown2 = _interopRequireDefault(_DataTableTown);

var _index = require('./index');

var _index2 = _interopRequireDefault(_index);

var _DataTable = require('./DataTable.md');

var _DataTable2 = _interopRequireDefault(_DataTable);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

(0, _react3.storiesOf)('dataviz|DataTable', module).addDecorator((0, _addonKnobs.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 = (0, _addonKnobs.boolean)('isStriped', true);
  var props = {
    data: _DataTableCounty2.default,
    columns: columns,
    defaultPageSize: 14,
    showPaginationBottom: false,
    className: isStriped ? '-striped' : null
  };
  return _react2.default.createElement(_index2.default, props);
}, { info: _DataTable2.default }).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 _react2.default.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 (0, _helper2.default)(d.ORIGIN_TRIPS, 2);
    },
    className: 'data-align-right',
    Cell: function Cell(row) {
      return _react2.default.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 = (0, _addonKnobs.boolean)('isStriped', true);
  var props = {
    data: _DataTableTown2.default,
    filterable: (0, _addonKnobs.boolean)('filterable', true),
    columns: columns,
    defaultPageSize: 10,
    defaultSorted: [{
      id: 'originTrips',
      desc: true
    }],
    className: isStriped && '-striped',
    showPaginationBottom: true
  };
  return _react2.default.createElement(_index2.default, props);
}, { info: _DataTable2.default });