import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread";

/**
 * Web MainNav Component
 *
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { registerElement, validateDOMAttributes, processChildren } from '../../shared/component-helper'; // import './style/dnb-main-nav.css' // no good solution to import the style here

import Input from '../../components/input/Input';
import Icon from '../../components/icon-primary/IconPrimary';
import Button from '../../components/button/Button';
import Logo from '../../components/logo/Logo';
import Notification from '../../components/notification/Notification';
const renderProps = {// render_data: null,
};
export const propTypes = {
  data: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
  baseurl: PropTypes.string,
  notification_amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  class: PropTypes.string,

  /** React props */
  className: PropTypes.string,
  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]) // Web Component props
  // render_data: PropTypes.func,

};
export const defaultProps = _objectSpread({
  data: [],
  baseurl: '/uilib/demos/example-app-1/',
  // baseurl: null,
  notification_amount: 0,
  class: null,

  /** React props */
  className: null,
  children: null
}, renderProps);

var _ref2 =
/*#__PURE__*/
React.createElement(Logo, {
  height: 80
});

var _ref3 =
/*#__PURE__*/
React.createElement(Logo, {
  height: 80
});

var _ref4 =
/*#__PURE__*/
React.createElement("div", {
  className: "dnb-main-nav__item"
}, React.createElement(Button, {
  variant: "secondary",
  text: "Logg ut"
}));

export default class MainNav extends PureComponent {
  static enableWebComponent() {
    registerElement(MainNav.tagName, MainNav, defaultProps);
  }

  static getData(props) {
    // if (typeof props.render_data === 'function') {
    //   return props.render_data(props)
    // }
    let res = [];
    if (props.data) res = props.data;else res = processChildren(props);
    if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
    return res || [];
  }

  constructor(props) {
    super(props);

    _defineProperty(this, "state", {
      isSubNavActive: false
    });

    _defineProperty(this, "toggleNavHandler", () => {
      const isSubNavActive = !this.state.isSubNavActive;
      this.setState({
        isSubNavActive
      });

      if (this._innerRef) {
        this._innerRef.current.setAttribute('tabindex', isSubNavActive ? '0' : '-1');

        if (isSubNavActive) {
          this._innerRef.current.focus();
        }
      }
    });

    this._innerRef = React.createRef();
  } // componentDidMount() {
  //   setTimeout(() => {
  //     this.setState({
  //       isSubNavActive: true
  //     })
  //   }, 1e3)
  // }


  componentWillUnmount() {
    this.setState({
      isSubNavActive: false
    });
  }

  render() {
    const {
      baseurl,
      notification_amount,
      className,
      class: _className
    } = this.props;
    const data = MainNav.getData(this.props);
    const params = {
      role: 'navigation',
      ['aria-label']: 'Main Menu',
      ['data-nav-active']: this.state.isSubNavActive,
      className: classnames('dnb-main-nav', className, _className) // also used for code markup simulation

    };
    validateDOMAttributes(this.props, params);
    return React.createElement("nav", params, React.createElement("div", {
      className: "dnb-main-nav__inner"
    }, React.createElement("div", {
      className: "dnb-main-nav__inner__inner"
    }, React.createElement("div", {
      className: "dnb-main-nav__left"
    }, React.createElement("div", {
      className: "dnb-main-nav__item"
    }, React.createElement(MainNavTrigger, {
      text: "Meny",
      onTrigger: this.toggleNavHandler
    })), _ref), React.createElement("div", {
      className: "dnb-main-nav__item dnb-main-nav__logo"
    }, baseurl && React.createElement("a", {
      href: baseurl,
      title: "Links back to front page"
    }, _ref2) || _ref3), React.createElement("div", {
      className: "dnb-main-nav__right"
    }, React.createElement("div", {
      className: "dnb-main-nav__item"
    }, notification_amount && React.createElement(Notification, {
      notification_amount: notification_amount,
      title_text: "Du har ".concat(notification_amount, " notifications")
    })), _ref4)), React.createElement("div", {
      className: "dnb-main-nav__nav"
    }, React.createElement("div", {
      className: "dnb-main-nav__nav__inner"
    }, _ref5, React.createElement("div", {
      className: "dnb-main-nav__links dnb-width-limit dnb-tab-focus",
      tabIndex: "-1",
      ref: this._innerRef
    }, data.length > 0 && React.createElement("ul", {
      className: "dnb-grid dnb-grid--gutters dnb-grid--center"
    }, data.map((_ref6, i) => {
      let {
        title,
        url
      } = _ref6;
      return React.createElement("li", {
        key: "mn".concat(i),
        className: "dnb-grid__cell"
      }, React.createElement("a", {
        href: url,
        className: "dnb-main-nav__link",
        tabIndex: "-1"
      }, React.createElement("span", null, title)));
    })))))));
  }

}

_defineProperty(MainNav, "tagName", 'dnb-main-nav');

_defineProperty(MainNav, "defaultProps", defaultProps);

MainNav.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};

var _ref7 =
/*#__PURE__*/
React.createElement("span", {
  className: "dnb-main-nav-trigger__icon"
}, React.createElement(Icon, {
  icon: "hamburger"
}));

const MainNavTrigger = props => {
  const {
    text,
    className,
    modifier
  } = props;
  const params = {
    className: classnames('dnb-main-nav-trigger', className, modifier ? "dnb-main-nav-trigger--".concat(modifier) : null)
  };

  const onTriggerHandle = () => {
    if (typeof props.onTrigger === 'function') {
      props.onTrigger();
    }
  };

  return React.createElement("button", _extends({
    onClick: onTriggerHandle
  }, params), _ref7, React.createElement("span", {
    className: "dnb-main-nav-trigger__text"
  }, text));
}; // const Logo = props => {
//   const { icon, className } = props
//
//   const params = {
//     icon: icon || 'dnb-logo',
//     className
//   }
//
//   return <Icon width="100" height="50" color="#007272" {...params} />
// }


const Search = props => {
  return React.createElement(Input, _extends({
    type: "search",
    id: "nav_search",
    label: "Label text",
    placeholder: "S\xF8k"
  }, props));
},
      _ref5 =
/*#__PURE__*/
React.createElement("div", {
  className: "dnb-mobile-exclusive"
}, React.createElement(Search, {
  id: "nav_search_mobile"
})),
      _ref =
/*#__PURE__*/
React.createElement("div", {
  className: "dnb-main-nav__item dnb-hide-on-mobile"
}, React.createElement(Search, null));