import { isVNode as _isVNode } from "vue";
import { createVNode as _createVNode } from "vue";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import { computed, defineComponent, unref } from 'vue';
import { DefaultPureSettings } from '../settings';
import { AppMenu, LeftContent, RightContent } from '@antd-vue/pro-layout';
import { Layout } from 'ant-design-vue';
import { getRenderComponent, PropRenderType, PropTypes } from '../utils';
import { DefaultAppMenuProps } from '../AppMenu';
import { DefaultRightContentProps } from '../RightContent';

function _isSlot(s) {
  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
}

export var DefaultGlobalHeaderProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, DefaultPureSettings), DefaultRightContentProps), DefaultAppMenuProps), {}, {
  sideWidth: PropTypes.number.def(210),
  collapsedWidth: PropTypes.number.def(48),
  prefixCls: PropTypes.string,

  /* 自定义头部左侧区域渲染 */
  leftContentRender: PropRenderType,

  /* 折叠按钮渲染 */
  collapsedButtonRender: PropRenderType,

  /* 自定义头部右侧区域渲染 */
  rightContentRender: PropRenderType
});
var GlobalHeader = defineComponent({
  name: 'GlobalHeader',
  props: _objectSpread({}, DefaultGlobalHeaderProps),
  inheritAttrs: false,
  emits: ['collapse', 'menuClick'],
  setup: function setup(props, _ref) {
    var slots = _ref.slots,
        attrs = _ref.attrs,
        emit = _ref.emit;
    var headerTheme = computed(function () {
      switch (props.layout) {
        case 'mix':
          return 'dark';

        case 'side':
          return 'light';

        case 'top':
        default:
          return props.theme;
      }
    });
    var headerStyle = computed(function () {
      var styles = {
        padding: 0,
        background: headerTheme.value == 'light' ? '#ffffff' : undefined,
        height: "".concat(props.headerHeight, "px"),
        lineHeight: "".concat(props.headerHeight, "px"),
        zIndex: props.layout === 'mix' ? 100 : 19,
        width: '100%'
      };

      if (props.layout === 'side' && props.fixedHeader) {
        styles.left = props.collapsed ? "".concat(props.collapsedWidth, "px") : "".concat(props.sideWidth, "px");
        styles.width = props.collapsed ? "calc(100% - ".concat(props.collapsedWidth, "px)") : "calc(100% - ".concat(props.sideWidth, "px)");
      }

      return styles;
    });
    var calcMenus = computed(function () {
      return {
        renderMenus: props.layout === 'top' || props.layout === 'mix' && props.splitMenus,
        headerMenus: props.menus
      };
    });
    var proHeaderClassNames = computed(function () {
      return ["".concat(props.prefixCls, "-header"), _defineProperty({
        dark: headerTheme.value === 'dark'
      }, "".concat(props.prefixCls, "-header-sider"), false)];
    });
    return function () {
      var _slot;

      var layout = props.layout,
          fixedHeader = props.fixedHeader;

      var defLeftContent = _createVNode(LeftContent, _objectSpread(_objectSpread({}, props), {}, {
        "onCollapse": function onCollapse(collapsed) {
          emit('collapse', collapsed);
        }
      }), null);

      var leftContent = getRenderComponent('leftContentRender', props, slots, defLeftContent, {
        propsArgs: [props],
        slotArg: props
      });

      var defRightContent = _createVNode(RightContent, _objectSpread(_objectSpread({}, props), {}, {
        "onMenuClick": function onMenuClick(menu) {
          emit('menuClick', menu);
        }
      }), null);

      var rightContent = getRenderComponent('rightContentRender', props, slots, defRightContent, {
        propsArgs: [props],
        slotArg: props
      });
      return _createVNode(Layout.Header, {
        "style": unref(headerStyle)
      }, _isSlot(_slot = _createVNode("div", {
        "class": unref(proHeaderClassNames)
      }, [_createVNode("div", {
        "class": 'left'
      }, _isSlot(leftContent) ? leftContent : {
        default: function _default() {
          return [leftContent];
        }
      }), _createVNode("div", {
        "class": 'main'
      }, [calcMenus.value.renderMenus && _createVNode(AppMenu, {
        "class": 'menu',
        "menus": calcMenus.value.headerMenus,
        "mode": 'horizontal',
        "theme": unref(headerTheme),
        "onClick": function onClick(menu) {
          emit('menuClick', menu);
        }
      }, null)]), _createVNode("div", {
        "class": 'right'
      }, _isSlot(rightContent) ? rightContent : {
        default: function _default() {
          return [rightContent];
        }
      })])) ? _slot : {
        default: function _default() {
          return [_slot];
        }
      });
    };
  }
});

GlobalHeader.install = function (app) {
  // app.use(Copyright as Plugin);
  // app.use(LeftContent);
  // app.use(RightContent);
  app.component(GlobalHeader.displayName, GlobalHeader);
};

export default GlobalHeader;