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