import _styled2 from "styled-components";
import _styled from "styled-components";
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
import React from 'react';
import { IconChatBubble, IconExitToApp, IconPerson, IconSettings, IconHome } from '@defencedigital/icon-library';
import { css } from 'styled-components';
import { Link } from '../../Link';
import { Masthead, MastheadNav, MastheadNavItem, MastheadUser, MastheadUserItem } from '.';
import { Notification, Notifications } from '../NotificationPanel';
import { MASTHEAD_SUBCOMPONENT } from './constants';
export default {
  args: {
    title: 'MOD.UK Design System'
  },
  component: Masthead,
  subcomponents: {
    MastheadNav: MastheadNav,
    MastheadNavItem: MastheadNavItem,
    MastheadUser: MastheadUser,
    MastheadUserItem: MastheadUserItem,
    Notifications: Notifications,
    Notification: Notification
  },
  title: 'Masthead',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    layout: 'fullscreen'
  }
};
export var Default = function Default(props) {
  var notifications = /*#__PURE__*/React.createElement(Notifications, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    })
  }, /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }));
  var user = /*#__PURE__*/React.createElement(MastheadUser, {
    initials: "RN"
  }, /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconPerson, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Profile")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconSettings, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Settings")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconChatBubble, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Support")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconExitToApp, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Logout")
  }));
  var nav = /*#__PURE__*/React.createElement(MastheadNav, null, /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Get started"),
    isActive: true
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Styles")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Components")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "About")
  }));
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    homeLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    nav: nav,
    notifications: notifications,
    user: user
  }));
};
Default.args = {
  hasUnreadNotification: true
};
export var CustomLogo = function CustomLogo(props) {
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    Logo: IconHome
  }));
};
CustomLogo.storyName = 'Custom logo';
CustomLogo.args = {
  onSearch: null
};
export var WithoutLogo = function WithoutLogo(props) {
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    hasDefaultLogo: false
  }));
};
WithoutLogo.storyName = 'Without logo';
WithoutLogo.args = {
  onSearch: null
};
export var WithSearch = function WithSearch(props) {
  return /*#__PURE__*/React.createElement(Masthead, props);
};
WithSearch.storyName = 'With search';
export var WithAvatarLinks = function WithAvatarLinks(props) {
  var user = /*#__PURE__*/React.createElement(MastheadUser, {
    initials: "RN"
  }, /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconPerson, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Profile")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconSettings, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Settings")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconChatBubble, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Support")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconExitToApp, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Logout")
  }));
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    user: user
  }));
};
WithAvatarLinks.storyName = 'With avatar links';
WithAvatarLinks.args = {
  onSearch: null
};
export var WithNavigation = function WithNavigation(props) {
  var nav = /*#__PURE__*/React.createElement(MastheadNav, null, /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Get started"),
    isActive: true
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Styles")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Components")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "About")
  }));
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    homeLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    nav: nav
  }));
};
WithNavigation.storyName = 'With navigation';
WithNavigation.args = {
  onSearch: null
};
export var WithNotifications = function WithNotifications(props) {
  var notifications = /*#__PURE__*/React.createElement(Notifications, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    })
  }, /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }), /*#__PURE__*/React.createElement(Notification, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    name: "Thomas Stephens",
    action: "added a new comment to your",
    on: "review",
    when: new Date('2019-11-05T14:25:02.178Z'),
    description: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores"
  }));
  return /*#__PURE__*/React.createElement(Masthead, _extends({}, props, {
    notifications: notifications
  }));
};
WithNotifications.storyName = 'With notifications';
WithNotifications.args = {
  onSearch: null
};
export var WithSearchOpen = Default.bind({});
WithSearchOpen.args = {
  initialOpenSubcomponent: MASTHEAD_SUBCOMPONENT.SEARCH
};
WithSearchOpen.storyName = 'With search open';
WithSearchOpen.parameters = {
  docs: {
    disable: true
  }
};
export var WithNotificationsOpen = function WithNotificationsOpen(args) {
  return /*#__PURE__*/React.createElement(_StyledDiv, null, /*#__PURE__*/React.createElement(Default, args));
};
WithNotificationsOpen.args = {
  initialOpenSubcomponent: MASTHEAD_SUBCOMPONENT.NOTIFICATIONS
};
WithNotificationsOpen.storyName = 'With notifications open';
WithNotificationsOpen.parameters = {
  docs: {
    disable: true
  }
};
export var WithUserMenuOpen = function WithUserMenuOpen(args) {
  var user = /*#__PURE__*/React.createElement(MastheadUser, {
    initials: "AB",
    initialIsOpen: true
  }, /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconPerson, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Profile")
  }), /*#__PURE__*/React.createElement(MastheadUserItem, {
    icon: /*#__PURE__*/React.createElement(IconSettings, null),
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Settings")
  }));
  var nav = /*#__PURE__*/React.createElement(MastheadNav, null, /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Get started"),
    isActive: true
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Styles")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "Components")
  }), /*#__PURE__*/React.createElement(MastheadNavItem, {
    link: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }, "About")
  }));
  return /*#__PURE__*/React.createElement(_StyledDiv2, null, /*#__PURE__*/React.createElement(Masthead, _extends({}, args, {
    homeLink: /*#__PURE__*/React.createElement(Link, {
      href: "#"
    }),
    nav: nav,
    user: user
  })));
};
WithUserMenuOpen.storyName = 'With user options open';
WithUserMenuOpen.parameters = {
  docs: {
    disable: true
  }
};
var _StyledDiv = _styled("div").withConfig({
  displayName: "Mastheadstories___StyledDiv",
  componentId: "sc-1qpli4g-0"
})(["height:25rem;"]);
var _StyledDiv2 = _styled("div").withConfig({
  displayName: "Mastheadstories___StyledDiv2",
  componentId: "sc-1qpli4g-1"
})(["height:10rem;"]);