import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Picture from '../../atom/picture';
import Link from '../../atom/link';
import ButtonLink from '../../atom/button-link';
import IconLink from '../../atom/button-link-icon';
import style from './style.css';
const SetupHeader = props => {
  const [show, updateShow] = React.useState(false);
  const {
    platformName,
    items,
    href,
    user = {},
    logo,
    logoMobile,
    isHome = false,
    isDashboard = false
  } = props;
  const {
    image = ''
  } = user;
  function onMouseEnter() {
    updateShow(true);
  }
  function onMouseLeave() {
    updateShow(false);
  }
  const platformListButtonProps = {
    type: 'tertiary',
    label: items.platformList.label,
    'aria-label': items.platformList.label,
    'data-name': `platform-list-button`,
    link: {
      href: items.platformList.href
    },
    icon: {
      position: 'left',
      type: 'list'
    }
  };
  const platformListIconButtonProps = {
    'aria-label': items.platformList.label,
    'data-name': `platform-list-button`,
    link: {
      href: items.platformList.href
    },
    icon: 'list'
  };
  const goAnalyticsButtonProps = items.globalAnalytics && isDashboard === false ? {
    type: 'secondary',
    label: items.globalAnalytics.label,
    'aria-label': items.globalAnalytics.label,
    'data-name': `platform-list-button`,
    link: {
      href: items.globalAnalytics.href
    },
    icon: {
      position: 'left',
      type: 'analytics'
    }
  } : null;
  const seeMyPlatformButtonProps = {
    type: 'primary',
    label: items.seeMyPlatform.label,
    'aria-label': items.seeMyPlatform.label,
    'data-name': `see-my-platform`,
    link: {
      href: items.seeMyPlatform.href,
      target: '_blank'
    },
    icon: {
      position: 'left',
      type: 'see'
    }
  };
  const logoutButtonProps = {
    type: 'text',
    label: items.logOut.label,
    'aria-label': items.logOut.label,
    'data-name': `logout-list-button`,
    link: {
      href: items.logOut.href,
      onClick: items.logOut.onClick
    },
    icon: {
      position: 'left',
      type: 'logout'
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement("div", {
    className: style.wrapper
  }, isHome ? /*#__PURE__*/React.createElement("div", {
    className: style.logo
  }, /*#__PURE__*/React.createElement(Link, {
    href: href
  }, /*#__PURE__*/React.createElement(Picture, {
    className: style.logoDesktop,
    src: logo
  }), /*#__PURE__*/React.createElement(Picture, {
    className: style.logoMobile,
    src: logoMobile
  }))) : /*#__PURE__*/React.createElement("ul", {
    className: style.list
  }, /*#__PURE__*/React.createElement("div", {
    className: classnames([style.button, style.platformList])
  }, /*#__PURE__*/React.createElement(ButtonLink, platformListButtonProps)), /*#__PURE__*/React.createElement("div", {
    className: style.platformListIcon
  }, /*#__PURE__*/React.createElement(IconLink, platformListIconButtonProps)), !isDashboard ? /*#__PURE__*/React.createElement("li", {
    className: classnames(style.element, style.platformName)
  }, platformName) : null), /*#__PURE__*/React.createElement("ul", {
    className: style.list
  }, goAnalyticsButtonProps ? /*#__PURE__*/React.createElement("div", {
    className: style.button
  }, /*#__PURE__*/React.createElement(ButtonLink, goAnalyticsButtonProps)) : null, isDashboard || isHome ? null : /*#__PURE__*/React.createElement("div", {
    className: style.button
  }, /*#__PURE__*/React.createElement(ButtonLink, seeMyPlatformButtonProps)), /*#__PURE__*/React.createElement("li", {
    onMouseEnter: onMouseEnter,
    className: style.profilePicture
  }, /*#__PURE__*/React.createElement("img", {
    src: image
  })), /*#__PURE__*/React.createElement("div", {
    className: style.logOut
  }, /*#__PURE__*/React.createElement(ButtonLink, logoutButtonProps)))), /*#__PURE__*/React.createElement("div", {
    "data-name": `logout-${show ? 'show' : 'hide'}`
  }, /*#__PURE__*/React.createElement("div", {
    className: style.arrowUp
  }), /*#__PURE__*/React.createElement("div", {
    className: style.logOut,
    onMouseLeave: onMouseLeave
  }, /*#__PURE__*/React.createElement(ButtonLink, logoutButtonProps))));
};
SetupHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  items: PropTypes.shape({
    seeMyPlatform: PropTypes.shape(ButtonLink.propTypes),
    logOut: PropTypes.shape(ButtonLink.propTypes),
    globalAnalytics: PropTypes.shape(ButtonLink.propTypes),
    platformList: PropTypes.shape(ButtonLink.propTypes)
  }),
  platformName: PropTypes.string,
  isDashboard: PropTypes.bool,
  isHome: PropTypes.bool,
  href: Link.propTypes.href,
  user: PropTypes.shape({
    username: PropTypes.string,
    image: PropTypes.string
  }),
  logo: Picture.propTypes.src,
  logoMobile: Picture.propTypes.src
} : {};
export default SetupHeader;
//# sourceMappingURL=index.js.map