"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _List = _interopRequireDefault(require("react-virtualized/dist/commonjs/List"));

var _AutoSizer = _interopRequireDefault(require("react-virtualized/dist/commonjs/AutoSizer"));

var _addonActions = require("@storybook/addon-actions");

var _menu = _interopRequireDefault(require("./menu.js"));

var _statefulMenu = _interopRequireDefault(require("./stateful-menu.js"));

var _index = require("../styles/index.js");

var _optionList = _interopRequireDefault(require("./option-list.js"));

var _optionProfile = _interopRequireDefault(require("./option-profile.js"));

var _constants = require("./constants.js");

var _examplesList = _interopRequireDefault(require("./examples-list.js"));

var _styledComponents = require("./styled-components.js");

var _examples$MENU$exampl;

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

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function CloudComponent() {
  return React.createElement("svg", {
    width: 24,
    height: 24,
    viewBox: "0 0 24 24",
    fill: "none",
    style: {
      width: 40,
      height: 40
    }
  }, React.createElement("rect", {
    width: 24,
    height: 24,
    fill: "white"
  }), React.createElement("path", {
    fillRule: "evenodd",
    clipRule: "evenodd",
    d: "M14.5 5C12.8755 5 11.4519 5.86084 10.6609 7.15112C10.2905 7.05249 9.90137 7 9.5 7C7.14185 7 5.20752 8.81372 5.01562 11.1221C3.28247 11.5605 2 13.1304 2 15C2 17.2092 3.79077 19 6 19H11V14.4143L9.70703 15.707C9.31665 16.0977 8.68335 16.0977 8.29297 15.707C7.90234 15.3167 7.90234 14.6833 8.29297 14.293L11.293 11.293C11.6833 10.9023 12.3167 10.9023 12.707 11.293L15.707 14.293C16.0977 14.6833 16.0977 15.3167 15.707 15.707C15.3167 16.0977 14.6833 16.0977 14.293 15.707L13 14.4143V19H17C19.7615 19 22 16.7615 22 14C22 11.9492 20.7656 10.187 18.9993 9.41577C18.9543 6.96924 16.9573 5 14.5 5Z",
    fill: "black"
  }));
}

var ITEMS = [{
  label: 'Item One'
}, {
  label: 'Item Two'
}, {
  disabled: true,
  label: 'Item Three'
}, {
  label: 'Item Four'
}, {
  label: 'Item Five'
}, {
  label: 'Item Six'
}, {
  label: 'Item Seven'
}, {
  label: 'Item Eight'
}, {
  label: 'Item Nine'
}, {
  label: 'Item Ten'
}, {
  label: 'Item Eleven'
}, {
  label: 'Item Twelve'
}];
var profileItem = {
  title: 'David Smith',
  subtitle: 'Senior Engineering Manager',
  body: 'Uber Everything',
  imgUrl: 'https://via.placeholder.com/60x60'
};
var PROFILE_ITEMS = [_objectSpread({}, profileItem), _objectSpread({}, profileItem, {
  subtitle: null
}), _objectSpread({}, profileItem, {
  body: null
}), _objectSpread({}, profileItem, {
  title: null
}), _objectSpread({}, profileItem, {
  imgUrl: null
}), _objectSpread({}, profileItem, {
  imgUrl: CloudComponent
})];

var _default = (_examples$MENU$exampl = {}, _defineProperty(_examples$MENU$exampl, _examplesList.default.MENU, function Story1() {
  return React.createElement(_menu.default, {
    items: ITEMS,
    rootRef: React.createRef(),
    overrides: {
      List: {
        style: {
          width: '200px'
        }
      },
      Option: {
        props: {
          getItemLabel: function getItemLabel(item) {
            return item.label;
          }
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.MENU_COMPACT, function StoryMenuCompact() {
  return React.createElement(_menu.default, {
    items: ITEMS,
    rootRef: React.createRef(),
    overrides: {
      List: {
        style: {
          width: '200px'
        }
      },
      Option: {
        props: {
          getItemLabel: function getItemLabel(item) {
            return item.label;
          },
          size: _constants.OPTION_LIST_SIZE.compact
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.MENU_PROFILE, function Story2() {
  return React.createElement(_menu.default, {
    items: PROFILE_ITEMS,
    rootRef: React.createRef(),
    overrides: {
      List: {
        style: {
          width: '350px'
        }
      },
      Option: {
        component: _optionProfile.default,
        props: {
          getProfileItemLabels: function getProfileItemLabels(_ref) {
            var title = _ref.title,
                subtitle = _ref.subtitle,
                body = _ref.body;
            return {
              title: title,
              subtitle: subtitle,
              body: body
            };
          },
          getProfileItemImg: function getProfileItemImg(item) {
            return item.imgUrl;
          },
          getProfileItemImgText: function getProfileItemImgText(item) {
            return item.title;
          }
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.MENU_STATEFUL, function Story3() {
  return React.createElement(_statefulMenu.default, {
    items: ITEMS,
    onItemSelect: (0, _addonActions.action)('item select'),
    overrides: {
      List: {
        style: {
          height: '150px',
          width: '350px'
        }
      },
      Option: {
        props: {
          getItemLabel: function getItemLabel(item) {
            return item.label;
          }
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.MENU_PROFILE_STATEFUL, function Story4() {
  return React.createElement(_statefulMenu.default, {
    items: PROFILE_ITEMS,
    overrides: {
      List: {
        style: {
          width: '350px',
          height: '150px',
          overflow: 'auto'
        }
      },
      Option: {
        component: _optionProfile.default,
        props: {
          getProfileItemLabels: function getProfileItemLabels(_ref2) {
            var title = _ref2.title,
                subtitle = _ref2.subtitle,
                body = _ref2.body;
            return {
              title: title,
              subtitle: subtitle,
              body: body
            };
          },
          getProfileItemImg: function getProfileItemImg(item) {
            return item.imgUrl;
          },
          getProfileItemImgText: function getProfileItemImgText(item) {
            return item.title;
          }
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.CHILD_MENU, function ChildMenuStory() {
  var SecondMenu = function SecondMenu() {
    return React.createElement(_menu.default, {
      items: ITEMS,
      overrides: {
        List: {
          style: {
            width: '200px'
          }
        },
        Option: {
          props: {
            getChildMenu: ThirdMenu
          }
        }
      },
      rootRef: React.createRef()
    });
  };

  var ThirdMenu = function ThirdMenu() {
    return React.createElement(_menu.default, {
      items: ITEMS,
      overrides: {
        List: {
          style: {
            width: '200px'
          }
        }
      },
      rootRef: React.createRef()
    });
  };

  return React.createElement(_statefulMenu.default, {
    items: PROFILE_ITEMS,
    overrides: {
      List: {
        style: {
          width: '350px',
          overflow: 'auto'
        }
      },
      Option: {
        component: _optionProfile.default,
        props: {
          getProfileItemLabels: function getProfileItemLabels(_ref3) {
            var title = _ref3.title,
                subtitle = _ref3.subtitle,
                body = _ref3.body;
            return {
              title: title,
              subtitle: subtitle,
              body: body
            };
          },
          getProfileItemImg: function getProfileItemImg(item) {
            return item.imgUrl;
          },
          getProfileItemImgText: function getProfileItemImgText(item) {
            return item.title;
          },
          getChildMenu: SecondMenu
        }
      }
    }
  });
}), _defineProperty(_examples$MENU$exampl, _examplesList.default.LONG_LIST, function LongListStory() {
  var items = _toConsumableArray(new Array(1500)).map(function (_, index) {
    return {
      label: "item number: ".concat(index + 1)
    };
  });

  var Container = (0, _index.styled)(_styledComponents.List, {
    height: '500px'
  });
  Container.displayName = "Container";

  function VirtualList(props) {
    return React.createElement(Container, {
      $ref: props.$ref
    }, React.createElement(_AutoSizer.default, null, function (_ref4) {
      var width = _ref4.width;
      return React.createElement(_List.default, {
        role: props.role,
        height: 500,
        rowCount: props.children.length,
        rowHeight: 36,
        rowRenderer: function rowRenderer(_ref5) {
          var index = _ref5.index,
              key = _ref5.key,
              style = _ref5.style;
          return React.createElement(_optionList.default, _extends({
            key: key,
            style: style
          }, props.children[index].props, {
            overrides: {
              ListItem: {
                style: {
                  paddingTop: 0,
                  paddingBottom: 0,
                  display: 'flex',
                  alignItems: 'center'
                }
              }
            }
          }));
        },
        width: width
      });
    }));
  }

  return React.createElement(_statefulMenu.default, {
    items: items,
    overrides: {
      List: {
        component: VirtualList
      }
    }
  });
}), _examples$MENU$exampl);

exports.default = _default;