"use strict";

var _react = require("@storybook/react");

var _react2 = _interopRequireWildcard(require("react"));

var _Box = require("../Box");

var _Table = require("../Table");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var __jsx = _react2["default"].createElement;
var stories = (0, _react.storiesOf)('Table', module);
stories.add('Default', function () {
  var initialRows = [{
    first_name: 'Charlie',
    last_name: 'Foxtrot'
  }, {
    first_name: 'Bravo',
    last_name: 'Echo'
  }, {
    first_name: 'Delta',
    last_name: 'Hotel'
  }, {
    first_name: 'Alpha',
    last_name: 'Gulf'
  }];

  var _useState = (0, _react2.useState)(initialRows),
      rows = _useState[0],
      setRows = _useState[1];

  var _useState2 = (0, _react2.useState)({
    id: 'first_name',
    direction: 'asc'
  }),
      sorting = _useState2[0],
      setSorting = _useState2[1]; // This would be handled by changing graphql prop - just using as an example here


  var onSort = function onSort(_ref) {
    var id = _ref.id,
        direction = _ref.direction;
    setSorting({
      id: id,
      direction: direction
    });
    var sortedRows = rows.sort(function (a, b) {
      if (a[id] < b[id]) {
        return direction === 'asc' ? -1 : 1;
      }

      if (a[id] > b[id]) {
        return direction === 'asc' ? 1 : -1;
      }

      return 0;
    });
    setRows(sortedRows);
  };

  (0, _react2.useEffect)(function () {
    onSort(sorting);
  }, []);

  var renderRow = function renderRow(props) {
    var first_name = props.first_name,
        last_name = props.last_name;
    return __jsx(_Table.Tr, {
      key: first_name
    }, __jsx(_Table.Td, null, first_name), __jsx(_Table.Td, null, last_name));
  };

  var renderHeader = function renderHeader() {
    return __jsx(_Table.TableHeader, {
      sorting: sorting,
      onSort: onSort
    }, __jsx(_Table.Th, {
      id: "first_name"
    }, "First name"), __jsx(_Table.Th, {
      id: "last_name"
    }, "Last name"));
  };

  var cursor = {
    total: 9,
    currentPage: 2,
    perPage: 4
  };
  return __jsx(_Box.Box, null, __jsx(_Table.Table, {
    rows: rows,
    renderRow: renderRow,
    renderHeader: renderHeader,
    cursor: cursor,
    onPageChange: function onPageChange(page) {
      return console.log('page: ', page);
    }
  }));
});
//# sourceMappingURL=examples.js.map