import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Table/test/Table.visual.jsx",
  _this = this;
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useEffect } from 'react';
import { testkitFactoryCreator } from '@wix/wix-ui-test-utils/vanilla';
import Table from '..';
import { tablePrivateDriverFactory } from '../Table.private.driver';
import Card from '../../Card';
import Checkbox from '../../Checkbox';
import ToggleSwitch from '../../ToggleSwitch';
import range from '../../utils/operators/range';
import { storySettings } from '../docs/storySettings';
import { ToolbarExample, ToolbarWithBulSelectionCheckboxExample, EmptyStateExample } from './testExamples';
import { visualize, snap } from 'storybook-snapper';
var dataHook = storySettings.dataHook;
var clickFirstRow = function clickFirstRow() {
  var node = document.body;
  var selector = '[data-table-row="dataTableRow"]';
  var elements = node.querySelectorAll(selector);
  elements[0].click();
};
var data = [{
  name: 'Apple Towels',
  SKU: '111222',
  price: '$2.00',
  inventory: 'In stock'
}, {
  name: 'Cyan Towels',
  SKU: '222333',
  price: '$2.00',
  inventory: 'In stock'
}, {
  name: 'Marble Slippers',
  SKU: '333444',
  price: '$14.00',
  inventory: 'In stock'
}, {
  name: 'Red Slippers',
  SKU: '444555',
  price: '$14.00',
  inventory: 'Out of stock'
}];
var columns = [{
  title: 'Name',
  render: function render(row) {
    return /*#__PURE__*/React.createElement("span", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 51,
        columnNumber: 20
      }
    }, row.name);
  },
  width: '30%',
  infoTooltipProps: {
    content: 'This is the name column'
  }
}, {
  title: 'SKU',
  render: function render(row) {
    return /*#__PURE__*/React.createElement("span", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 20
      }
    }, row.SKU);
  },
  width: '20%'
}, {
  title: 'Price',
  render: function render(row) {
    return /*#__PURE__*/React.createElement("span", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 20
      }
    }, row.price);
  },
  width: '20%'
}, {
  title: 'Inventory',
  render: function render(row) {
    return /*#__PURE__*/React.createElement("span", {
      __self: _this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 67,
        columnNumber: 20
      }
    }, row.inventory);
  },
  width: '20%'
}];
var tablePrivateTestkitFactory = testkitFactoryCreator(tablePrivateDriverFactory);
var createDriver = function createDriver() {
  return tablePrivateTestkitFactory({
    wrapper: document.body,
    dataHook: dataHook
  });
};
var getHorizontalScrollColumnContent = function getHorizontalScrollColumnContent(columnIndex, rowIndex) {
  return columnIndex === 1 && rowIndex === 2 ? 'A very long column text that should span multiple lines and grow the row height.' : "Value ".concat(columnIndex + 1, "-").concat(rowIndex + 1);
};
var horizontalScrollColumnCount = 20;
var horizontalScrollRowCount = 4;
export var horizontalScrollData = range(0, horizontalScrollRowCount).map(function (rowIndex) {
  return range(0, horizontalScrollColumnCount).reduce(function (rows, columnIndex) {
    return _objectSpread(_objectSpread({}, rows), {}, _defineProperty({}, "value".concat(columnIndex + 1), getHorizontalScrollColumnContent(columnIndex, rowIndex)));
  }, {});
});
export var horizontalScrollColumns = range(0, horizontalScrollColumnCount).map(function (columnIndex) {
  return {
    title: "Column ".concat(columnIndex + 1),
    render: function render(row) {
      return row["value".concat(columnIndex + 1)];
    },
    width: 150,
    infoTooltipProps: {
      content: 'Tooltip!'
    }
  };
});
var rowVerticalPaddingValues = ['large', 'medium', 'small', 'tiny', 'xTiny', 'xxTiny'];
var rowVerticalPaddingTests = rowVerticalPaddingValues.map(function (rowVerticalPadding) {
  return {
    it: "Should display the table row with \"".concat(rowVerticalPadding, "\" rowVerticalPadding"),
    props: {
      data: data,
      columns: columns,
      rowVerticalPadding: rowVerticalPadding
    }
  };
});
var rowVerticalPaddingTestsWithExpandableRow = rowVerticalPaddingValues.map(function (rowVerticalPadding) {
  return {
    it: "Should display the table expanded row with \"".concat(rowVerticalPadding, "\" rowVerticalPadding"),
    props: {
      rowDetails: function rowDetails(row) {
        return /*#__PURE__*/React.createElement("span", {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 138,
            columnNumber: 11
          }
        }, "This is an expandable space where you see the row details.");
      },
      data: data,
      columns: columns,
      rowVerticalPadding: rowVerticalPadding
    },
    componentDidMount: function componentDidMount(done) {
      clickFirstRow();
      done();
    }
  };
});
var stickyFirstTwoColumns = {
  it: 'Should show table with two sticky columns',
  props: {
    horizontalScroll: true,
    showSelection: true,
    stickyColumns: 2,
    data: horizontalScrollData,
    columns: horizontalScrollColumns
  },
  componentDidMount: function componentDidMount(done) {
    createDriver().scrollHorizontallyTo(200);
    done();
  }
};
var tests = [{
  describe: 'Basic',
  its: [{
    it: 'Should display the table with data',
    props: {
      data: data,
      columns: columns
    }
  }, {
    it: 'Should display the table with "standard" skin',
    props: {
      data: data,
      columns: columns
    }
  }, {
    it: 'Should display the table with "neutral" skin',
    props: {
      data: data,
      columns: columns,
      skin: 'neutral'
    }
  }, {
    it: 'Should display the table with aligned columns',
    props: {
      data: [{
        name: 'Apple Towels',
        visible: true,
        onSale: false,
        price: '$22.99'
      }, {
        name: 'Cyan Towls',
        visible: false,
        onSale: false,
        price: '$145.99'
      }, {
        name: 'Marble Slippers',
        visible: false,
        onSale: false,
        price: '$125,265.00'
      }, {
        name: 'Red Slippers',
        visible: false,
        onSale: false,
        price: '$1,265.69'
      }],
      columns: [{
        title: 'Name',
        render: function render(row) {
          return /*#__PURE__*/React.createElement("span", {
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 227,
              columnNumber: 30
            }
          }, row.name);
        },
        width: '30%'
      }, {
        title: 'Visibility',
        render: function render(row) {
          return /*#__PURE__*/React.createElement("span", {
            style: {
              display: 'inline-flex',
              alignItems: 'center'
            },
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 233,
              columnNumber: 17
            }
          }, /*#__PURE__*/React.createElement(ToggleSwitch, {
            checked: row.visible,
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 234,
              columnNumber: 19
            }
          }), /*#__PURE__*/React.createElement("span", {
            style: {
              marginLeft: 12
            },
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 235,
              columnNumber: 19
            }
          }, row.visible ? 'Visible' : 'Hidden'));
        },
        width: '20%',
        align: 'start'
      }, {
        title: 'On Sale',
        render: function render() {
          return /*#__PURE__*/React.createElement(Checkbox, {
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 245,
              columnNumber: 29
            }
          });
        },
        width: '20%',
        align: 'center',
        infoTooltipProps: {
          content: 'I am a Tooltip!'
        }
      }, {
        title: 'Price',
        render: function render(row) {
          return /*#__PURE__*/React.createElement("span", {
            __self: _this,
            __source: {
              fileName: _jsxFileName,
              lineNumber: 254,
              columnNumber: 30
            }
          }, row.price);
        },
        width: '20%',
        align: 'end'
      }]
    }
  }, {
    it: 'Should display the table with selection',
    props: {
      data: data,
      columns: columns,
      showSelection: true
    }
  }, {
    it: 'Should display the table with selection with unselectable row',
    props: {
      data: [].concat(data, [{
        name: 'Unselectable Product',
        SKU: '123123',
        price: '$6.00',
        inventory: 'In stock',
        unselectable: true
      }]),
      columns: columns,
      showSelection: true
    }
  }, {
    it: 'Should display the table with selection but without Select All column title',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      hideBulkSelectionCheckbox: true
    }
  }, {
    it: 'Should display the table with disabled selection',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      selectionDisabled: true
    }
  }, {
    it: 'Should display the table with disabled selection but without Select All column title',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      hideBulkSelectionCheckbox: true,
      selectionDisabled: true
    }
  }, {
    it: 'Should display the table without column titles',
    props: {
      data: data,
      columns: columns,
      children: /*#__PURE__*/React.createElement(Table.Content, {
        titleBarVisible: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 319,
          columnNumber: 21
        }
      })
    }
  }, {
    it: 'Should display the table with hidden column titles',
    props: {
      data: data,
      columns: columns,
      children: /*#__PURE__*/React.createElement(Table.Content, {
        titleBarDisplay: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 327,
          columnNumber: 21
        }
      })
    }
  }, {
    it: 'with active row',
    props: {
      data: data,
      columns: columns,
      isRowActive: function isRowActive(_, rowNum) {
        return rowNum === 1;
      }
    }
  }].concat(_toConsumableArray(rowVerticalPaddingTests), _toConsumableArray(rowVerticalPaddingTestsWithExpandableRow), [{
    it: "Should display the table with expanded row details without padding",
    props: {
      rowDetails: function rowDetails(row) {
        return /*#__PURE__*/React.createElement("span", {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 345,
            columnNumber: 15
          }
        }, "This is an expandable space where you see the row details.");
      },
      data: data,
      columns: columns,
      removeRowDetailsPadding: true,
      rowVerticalPadding: 'large'
    },
    componentDidMount: function componentDidMount(done) {
      clickFirstRow();
      done();
    }
  }])
}, {
  describe: 'Toolbar',
  its: [{
    it: 'Should display the table with toolbar',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      children: [/*#__PURE__*/React.createElement(Table.ToolbarContainer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 372,
          columnNumber: 13
        }
      }, function () {
        return /*#__PURE__*/React.createElement(ToolbarExample, {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 373,
            columnNumber: 22
          }
        });
      }), /*#__PURE__*/React.createElement(Table.Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 375,
          columnNumber: 13
        }
      })]
    }
  }, {
    it: 'Should display the table with toolbar with bulk selection checkbox',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      hideBulkSelectionCheckbox: true,
      children: [/*#__PURE__*/React.createElement(Table.ToolbarContainer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 387,
          columnNumber: 13
        }
      }, function () {
        return /*#__PURE__*/React.createElement(ToolbarWithBulSelectionCheckboxExample, {
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 388,
            columnNumber: 22
          }
        });
      }), /*#__PURE__*/React.createElement(Table.Content, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 390,
          columnNumber: 13
        }
      })]
    }
  }, {
    it: 'Should display the table with toolbar and without column titles',
    props: {
      data: data,
      columns: columns,
      children: [/*#__PURE__*/React.createElement(ToolbarExample, {
        key: "toolbar",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 400,
          columnNumber: 13
        }
      }), /*#__PURE__*/React.createElement(Table.Content, {
        key: "content",
        titleBarVisible: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 401,
          columnNumber: 13
        }
      })]
    }
  }]
}, {
  describe: 'EmptyState',
  its: [{
    it: 'Should display the table with EmptyState',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      children: /*#__PURE__*/React.createElement(EmptyStateExample, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 416,
          columnNumber: 21
        }
      })
    }
  }, {
    it: 'Should display the table with toolbar and EmptyState',
    props: {
      data: data,
      columns: columns,
      showSelection: true,
      children: [/*#__PURE__*/React.createElement(ToolbarExample, {
        key: "toolbar",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 426,
          columnNumber: 13
        }
      }), /*#__PURE__*/React.createElement(EmptyStateExample, {
        key: "emptystate",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 427,
          columnNumber: 13
        }
      })]
    }
  }]
}, {
  describe: 'Sticky and Horizontal Scroll',
  its: [{
    it: 'Should display the table with horizontal scroll',
    props: {
      horizontalScroll: true,
      data: horizontalScrollData,
      columns: horizontalScrollColumns
    }
  }, {
    it: 'Should show left shadow on scroll',
    props: {
      horizontalScroll: true,
      data: horizontalScrollData,
      columns: horizontalScrollColumns
    },
    componentDidMount: function componentDidMount(done) {
      createDriver().scrollHorizontallyTo(250);
      done();
    }
  }, {
    it: 'Should sticky first bulk selection column',
    props: {
      horizontalScroll: true,
      showSelection: true,
      stickyColumns: 1,
      data: horizontalScrollData,
      columns: horizontalScrollColumns
    },
    componentDidMount: function componentDidMount(done) {
      createDriver().scrollHorizontallyTo(200);
      done();
    }
  }, stickyFirstTwoColumns, {
    it: 'Should support selection, highlight and active with sticky columns',
    props: {
      horizontalScroll: true,
      showSelection: true,
      stickyColumns: 2,
      data: horizontalScrollData,
      columns: horizontalScrollColumns,
      isRowHighlight: function isRowHighlight(_, rowNum) {
        return rowNum % 2 === 0;
      },
      isRowActive: function isRowActive(_, rowNum) {
        return rowNum === 3;
      }
    },
    componentDidMount: function componentDidMount(done) {
      var driver = createDriver();
      driver.scrollHorizontallyTo(200);
      driver.clickRowCheckbox(1);
      done();
    }
  }, {
    it: 'Should sticky columns when table content and titlebar are rendered separately',
    props: {
      horizontalScroll: true,
      stickyColumns: 2,
      data: horizontalScrollData,
      columns: horizontalScrollColumns,
      children: [/*#__PURE__*/React.createElement(Table.Titlebar, {
        key: "titlebar",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 497,
          columnNumber: 13
        }
      }), /*#__PURE__*/React.createElement(Table.Content, {
        key: "content",
        titleBarVisible: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 498,
          columnNumber: 13
        }
      })]
    },
    componentDidMount: function componentDidMount(done) {
      createDriver().scrollHorizontallyTo(200);
      done();
    }
  }]
}];
var TableWrapper = function TableWrapper(_ref) {
  var props = _ref.props,
    componentDidMount = _ref.componentDidMount,
    done = _ref.done;
  useEffect(function () {
    componentDidMount && componentDidMount(done);
  }, [componentDidMount, done]);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      backgroundColor: '#DFE5EB',
      padding: '20px'
    },
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 516,
      columnNumber: 5
    }
  }, /*#__PURE__*/React.createElement(Card, {
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 517,
      columnNumber: 7
    }
  }, /*#__PURE__*/React.createElement(Table, _extends({
    dataHook: dataHook
  }, props, {
    componentDidMount: componentDidMount,
    __self: _this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 518,
      columnNumber: 9
    }
  }))));
};
tests.forEach(function (_ref2) {
  var describe = _ref2.describe,
    its = _ref2.its;
  its.forEach(function (_ref3) {
    var it = _ref3.it,
      props = _ref3.props,
      componentDidMount = _ref3.componentDidMount;
    visualize("Table/".concat(describe), function () {
      snap(it, function (done) {
        return /*#__PURE__*/React.createElement(TableWrapper, {
          props: props,
          componentDidMount: componentDidMount,
          done: done,
          __self: _this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 532,
            columnNumber: 9
          }
        });
      });
    });
  });
});