import React from 'react';
import Table from './Table';
import TableCaption from './TableCaption';
import TableHead from './TableHead';
import TableRow from './TableRow';
import TableCell from './TableCell';
import TableBody from './TableBody';
export default {
  title: 'Components/Table',
  component: Table,
  argTypes: {
    dense: {
      table: {
        disable: true
      }
    }
  }
};
var tableTemplateData = {
  headings: [{
    displayName: 'Document title',
    propName: 'documentTitle'
  }, {
    displayName: 'Description',
    propName: 'description'
  }, {
    displayName: 'Links',
    propName: 'links'
  }, {
    displayName: 'Year',
    propName: 'year'
  }],
  data: [{
    documentTitle: 'Declaration of Independence',
    description: 'Statement adopted by the Continental Congress declaring independence from the British Empire.',
    links: /*#__PURE__*/React.createElement("a", {
      href: "# "
    }, ' ', "https://billofrightsinstitute.org/founding-documents/declaration-of-independence/"),
    year: '1776'
  }, {
    documentTitle: 'Bill of Rights',
    description: 'The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.',
    links: /*#__PURE__*/React.createElement("a", {
      href: "# "
    }, "https://billofrightsinstitute.org/founding-documents/bill-of-rights/"),
    year: '1791'
  }]
};
var multiHeaderTableData = {
  headings: [{
    displayName: 'Name',
    propName: 'name',
    bodyComponent: 'th'
  }, {
    displayName: 'Street',
    propName: 'street'
  }, {
    displayName: 'ZIP code',
    propName: 'zipcode'
  }, {
    displayName: 'Employer',
    propName: 'employer'
  }, {
    displayName: 'Industry',
    propName: 'industry'
  }],
  data: [{
    name: 'John Doe',
    street: '123 Braavos Ave.',
    zipcode: '20005',
    employer: 'Acme Co.',
    industry: 'Healthcare'
  }, {
    name: 'John Doe',
    street: "456 King's Landing",
    zipcode: '20005',
    employer: 'Acme Co.',
    industry: 'Healthcare'
  }]
};

var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(Table, args, /*#__PURE__*/React.createElement(TableCaption, null, "Table"), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, tableTemplateData.headings.map(function (_ref) {
    var displayName = _ref.displayName;
    return /*#__PURE__*/React.createElement(TableCell, {
      key: displayName
    }, displayName);
  }))), /*#__PURE__*/React.createElement(TableBody, null, tableTemplateData.data.map(function (dataItem, index) {
    return /*#__PURE__*/React.createElement(TableRow, {
      key: index
    }, tableTemplateData.headings.map(function (heading) {
      return /*#__PURE__*/React.createElement(TableCell, {
        key: "".concat(heading.displayName, "-").concat(dataItem[heading.propName]),
        stackedTitle: heading.displayName
      }, dataItem[heading.propName]);
    }));
  })));
};

export var ScrollableTable = Template.bind({});
ScrollableTable.args = {
  scrollable: true
};
export var StackableTable = Template.bind({});
StackableTable.args = {
  stackable: true,
  stackableBreakpoint: 'md'
};
export var MultiHeaderTable = function MultiHeaderTable() {
  return /*#__PURE__*/React.createElement(Table, null, /*#__PURE__*/React.createElement(TableCaption, null, "Household members"), /*#__PURE__*/React.createElement("col", null), /*#__PURE__*/React.createElement("colgroup", {
    span: "2"
  }), /*#__PURE__*/React.createElement("colgroup", {
    span: "2"
  }), /*#__PURE__*/React.createElement(TableHead, null, /*#__PURE__*/React.createElement(TableRow, null, /*#__PURE__*/React.createElement(TableCell, {
    component: "td",
    rowSpan: "1"
  }), /*#__PURE__*/React.createElement(TableCell, {
    component: "th",
    colSpan: "2",
    scope: "colgroup"
  }, "Address"), /*#__PURE__*/React.createElement(TableCell, {
    colSpan: "2",
    scope: "colgroup"
  }, "Employment")), /*#__PURE__*/React.createElement(TableRow, null, multiHeaderTableData.headings.map(function (_ref2) {
    var displayName = _ref2.displayName;
    return /*#__PURE__*/React.createElement(TableCell, {
      component: "th",
      scope: "col",
      key: displayName
    }, displayName);
  }))), /*#__PURE__*/React.createElement(TableBody, null, multiHeaderTableData.data.map(function (dataItem, index) {
    return /*#__PURE__*/React.createElement(TableRow, {
      key: index
    }, multiHeaderTableData.headings.map(function (heading) {
      return /*#__PURE__*/React.createElement(TableCell, {
        key: "".concat(heading.displayName, "-").concat(dataItem[heading.displayName]),
        component: heading.bodyComponent || 'td'
      }, dataItem[heading.propName]);
    }));
  })));
};