"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.IntegrationWithReactRouterAndHeightModified = exports.IntegrationWithReactRouter = exports.IntegrationConditionallyHideTab = exports.HorizontalScrollEnabled = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactRouter = require("react-router");
var _reactRouterDom = require("react-router-dom");
var _addonActions = require("@storybook/addon-actions");
var _ = require("../..");
var _TabsNav = _interopRequireDefault(require("./TabsNav.mdx"));
var _Links = require("../../common/Links");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / TabsNav',
  parameters: {
    component: _.TabsNav,
    docs: {
      page: _TabsNav.default
    }
  }
};
var MyLink = function MyLink(_ref) {
  var to = _ref.to,
    children = _ref.children,
    className = _ref.className;
  return _react.default.createElement(_reactRouterDom.Link, {
    className: className,
    to: to
  }, children);
};
var Content = function Content(_ref2) {
  var height = _ref2.height,
    hideFirst = _ref2.hideFirst;
  var route1Match = (0, _reactRouterDom.useMatch)('/route1');
  var route2Match = (0, _reactRouterDom.useMatch)('/route2');
  return _react.default.createElement(_.Flexbox, {
    container: true,
    direction: "column",
    gap: 0
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.TabsNav, {
    height: height
  }, !hideFirst && _react.default.createElement(_.TabsNav.Tab, {
    title: "Link to /route1",
    to: "/route1",
    onTitleClick: (0, _addonActions.action)('Clicked title1'),
    active: !!route1Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route2"),
    to: "/route2",
    onTitleClick: (0, _addonActions.action)('Clicked title2'),
    active: !!route2Match
  }))), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Separator, null)), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    py: 4
  }, _react.default.createElement(_reactRouter.Routes, null, _react.default.createElement(_reactRouter.Route, {
    path: "/route1",
    element: _react.default.createElement(_react.default.Fragment, null, "/route1 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route2",
    element: _react.default.createElement(_react.default.Fragment, null, "/route2 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/",
    element: _react.default.createElement(_reactRouter.Navigate, {
      to: "/route1",
      replace: true
    })
  })))));
};
var IntegrationWithReactRouter = exports.IntegrationWithReactRouter = {
  render: function render() {
    return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(_Links.LinkProvider, {
      link: MyLink
    }, _react.default.createElement(Content, null)));
  },
  name: 'Integration: With react-router'
};
var IntegrationWithReactRouterAndHeightModified = exports.IntegrationWithReactRouterAndHeightModified = {
  render: function render() {
    return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(_Links.LinkProvider, {
      link: MyLink
    }, _react.default.createElement(Content, {
      height: 24
    })));
  },
  name: 'Integration: With react-router and height modified'
};
var IntegrationConditionallyHideTab = exports.IntegrationConditionallyHideTab = {
  render: function render() {
    return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(_Links.LinkProvider, {
      link: MyLink
    }, _react.default.createElement(Content, {
      hideFirst: true
    })));
  },
  name: 'Integration: conditionally hide tab'
};
var ContentWithManyLinks = function ContentWithManyLinks() {
  var route1Match = (0, _reactRouterDom.useMatch)('/route1');
  var route2Match = (0, _reactRouterDom.useMatch)('/route2');
  var route3Match = (0, _reactRouterDom.useMatch)('/route3');
  var route4Match = (0, _reactRouterDom.useMatch)('/route4');
  var route5Match = (0, _reactRouterDom.useMatch)('/route5');
  var route6Match = (0, _reactRouterDom.useMatch)('/route6');
  return _react.default.createElement(_.Flexbox, {
    container: true,
    direction: "column",
    gap: 0
  }, _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.TabsNav, {
    height: 11,
    scrollOptions: {
      active: true,
      scrollBarHidden: true
    }
  }, _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route1"),
    to: "/route1",
    onTitleClick: (0, _addonActions.action)('Clicked title1'),
    active: !!route1Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route2"),
    to: "/route2",
    onTitleClick: (0, _addonActions.action)('Clicked title2'),
    active: !!route2Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route3"),
    to: "/route3",
    onTitleClick: (0, _addonActions.action)('Clicked title3'),
    active: !!route3Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route4"),
    to: "/route4",
    onTitleClick: (0, _addonActions.action)('Clicked title4'),
    active: !!route4Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route5"),
    to: "/route5",
    onTitleClick: (0, _addonActions.action)('Clicked title5'),
    active: !!route5Match
  }), _react.default.createElement(_.TabsNav.Tab, {
    title: _react.default.createElement("div", null, "Link to /route6"),
    to: "/route6",
    onTitleClick: (0, _addonActions.action)('Clicked title6'),
    active: !!route6Match
  }))), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Separator, null)), _react.default.createElement(_.Flexbox, {
    item: true
  }, _react.default.createElement(_.Box, {
    py: 4
  }, _react.default.createElement(_reactRouter.Routes, null, _react.default.createElement(_reactRouter.Route, {
    path: "/route1",
    element: _react.default.createElement(_react.default.Fragment, null, "/route1 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route2",
    element: _react.default.createElement(_react.default.Fragment, null, "/route2 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route3",
    element: _react.default.createElement(_react.default.Fragment, null, "/route3 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route4",
    element: _react.default.createElement(_react.default.Fragment, null, "/route4 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route5",
    element: _react.default.createElement(_react.default.Fragment, null, "/route5 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/route6",
    element: _react.default.createElement(_react.default.Fragment, null, "/route6 content")
  }), _react.default.createElement(_reactRouter.Route, {
    path: "/",
    element: _react.default.createElement(_reactRouter.Navigate, {
      to: "/route1",
      replace: true
    })
  })))));
};
var HorizontalScrollEnabled = exports.HorizontalScrollEnabled = {
  render: function render() {
    return _react.default.createElement(_reactRouterDom.MemoryRouter, null, _react.default.createElement(_Links.LinkProvider, {
      link: MyLink
    }, _react.default.createElement("div", null, "This is a title", _react.default.createElement(ContentWithManyLinks, null))));
  },
  name: 'Enabled horizontal scroll'
};