import * as _vue 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; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import classNames from '../_util/classNames';
import { inject, provide } from 'vue';
import PropTypes from '../_util/vue-types';
import { initDefaultProps, getOptionProps, hasProp, getComponent, getSlot } from '../_util/props-util';
import BaseMixin from '../_util/BaseMixin';
import isNumeric from '../_util/isNumeric';
import { ConfigConsumerProps } from '../config-provider';
import BarsOutlined from '@ant-design/icons-vue/BarsOutlined';
import RightOutlined from '@ant-design/icons-vue/RightOutlined';
import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
import omit from 'omit.js';
var dimensionMaxMap = {
  xs: '479.98px',
  sm: '575.98px',
  md: '767.98px',
  lg: '991.98px',
  xl: '1199.98px',
  xxl: '1599.98px'
}; // export type CollapseType = 'clickTrigger' | 'responsive';

export var SiderProps = {
  prefixCls: PropTypes.string,
  collapsible: PropTypes.bool,
  collapsed: PropTypes.bool,
  defaultCollapsed: PropTypes.bool,
  reverseArrow: PropTypes.bool,
  // onCollapse?: (collapsed: boolean, type: CollapseType) => void;
  zeroWidthTriggerStyle: PropTypes.object,
  trigger: PropTypes.any,
  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  collapsedWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  breakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
  theme: PropTypes.oneOf(['light', 'dark']).def('dark'),
  onBreakpoint: PropTypes.func,
  onCollapse: PropTypes.func,
  'onUpdate:collapse': PropTypes.func
}; // export interface SiderState {
//   collapsed?: boolean;
//   below: boolean;
//   belowShow?: boolean;
// }
// export interface SiderContext {
//   siderCollapsed: boolean;
// }

var generateId = function () {
  var i = 0;
  return function () {
    var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    i += 1;
    return "".concat(prefix).concat(i);
  };
}();

export default {
  name: 'ALayoutSider',
  __ANT_LAYOUT_SIDER: true,
  mixins: [BaseMixin],
  props: initDefaultProps(SiderProps, {
    collapsible: false,
    defaultCollapsed: false,
    reverseArrow: false,
    width: 200,
    collapsedWidth: 80
  }),
  data: function data() {
    this.uniqueId = generateId('ant-sider-');
    var matchMedia;

    if (typeof window !== 'undefined') {
      matchMedia = window.matchMedia;
    }

    var props = getOptionProps(this);

    if (matchMedia && props.breakpoint && props.breakpoint in dimensionMaxMap) {
      this.mql = matchMedia("(max-width: ".concat(dimensionMaxMap[props.breakpoint], ")"));
    }

    var sCollapsed;

    if ('collapsed' in props) {
      sCollapsed = props.collapsed;
    } else {
      sCollapsed = props.defaultCollapsed;
    }

    return {
      sCollapsed: sCollapsed,
      below: false,
      belowShow: false
    };
  },
  watch: {
    collapsed: function collapsed(val) {
      this.setState({
        sCollapsed: val
      });
    }
  },
  created: function created() {
    provide('layoutSiderContext', this); // menu组件中使用
  },
  setup: function setup() {
    return {
      siderHook: inject('siderHook', {}),
      configProvider: inject('configProvider', ConfigConsumerProps)
    };
  },
  mounted: function mounted() {
    var _this = this;

    this.$nextTick(function () {
      if (_this.mql) {
        _this.mql.addListener(_this.responsiveHandler);

        _this.responsiveHandler(_this.mql);
      }

      if (_this.siderHook.addSider) {
        _this.siderHook.addSider(_this.uniqueId);
      }
    });
  },
  beforeUnmount: function beforeUnmount() {
    if (this.mql) {
      this.mql.removeListener(this.responsiveHandler);
    }

    if (this.siderHook.removeSider) {
      this.siderHook.removeSider(this.uniqueId);
    }
  },
  methods: {
    responsiveHandler: function responsiveHandler(mql) {
      this.setState({
        below: mql.matches
      });
      this.$emit('breakpoint', mql.matches);

      if (this.sCollapsed !== mql.matches) {
        this.setCollapsed(mql.matches, 'responsive');
      }
    },
    setCollapsed: function setCollapsed(collapsed, type) {
      if (!hasProp(this, 'collapsed')) {
        this.setState({
          sCollapsed: collapsed
        });
      }

      this.$emit('update:collapsed', collapsed);
      this.$emit('collapse', collapsed, type);
    },
    toggle: function toggle() {
      var collapsed = !this.sCollapsed;
      this.setCollapsed(collapsed, 'clickTrigger');
    },
    belowShowChange: function belowShowChange() {
      this.setState({
        belowShow: !this.belowShow
      });
    }
  },
  render: function render() {
    var _classNames;

    var _getOptionProps$this$ = _objectSpread(_objectSpread({}, getOptionProps(this)), this.$attrs),
        customizePrefixCls = _getOptionProps$this$.prefixCls,
        className = _getOptionProps$this$.class,
        theme = _getOptionProps$this$.theme,
        collapsible = _getOptionProps$this$.collapsible,
        reverseArrow = _getOptionProps$this$.reverseArrow,
        style = _getOptionProps$this$.style,
        width = _getOptionProps$this$.width,
        collapsedWidth = _getOptionProps$this$.collapsedWidth,
        zeroWidthTriggerStyle = _getOptionProps$this$.zeroWidthTriggerStyle,
        others = _objectWithoutProperties(_getOptionProps$this$, ["prefixCls", "class", "theme", "collapsible", "reverseArrow", "style", "width", "collapsedWidth", "zeroWidthTriggerStyle"]);

    var getPrefixCls = this.configProvider.getPrefixCls;
    var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
    var divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'breakpoint', 'onBreakpoint', 'siderHook', 'zeroWidthTriggerStyle', 'trigger', 'onUpdate:collapse']);
    var trigger = getComponent(this, 'trigger');
    var rawWidth = this.sCollapsed ? collapsedWidth : width; // use "px" as fallback unit for width

    var siderWidth = isNumeric(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth); // special trigger when collapsedWidth == 0

    var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? _vue.createVNode("span", {
      "onClick": this.toggle,
      "class": "".concat(prefixCls, "-zero-width-trigger ").concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left'),
      "style": zeroWidthTriggerStyle
    }, [_vue.createVNode(BarsOutlined, null, null)]) : null;
    var iconObj = {
      expanded: reverseArrow ? _vue.createVNode(RightOutlined, null, null) : _vue.createVNode(LeftOutlined, null, null),
      collapsed: reverseArrow ? _vue.createVNode(LeftOutlined, null, null) : _vue.createVNode(RightOutlined, null, null)
    };
    var status = this.sCollapsed ? 'collapsed' : 'expanded';
    var defaultTrigger = iconObj[status];
    var triggerDom = trigger !== null ? zeroWidthTrigger || _vue.createVNode("div", {
      "class": "".concat(prefixCls, "-trigger"),
      "onClick": this.toggle,
      "style": {
        width: siderWidth
      }
    }, [trigger || defaultTrigger]) : null;

    var divStyle = _objectSpread(_objectSpread({}, style), {}, {
      flex: "0 0 ".concat(siderWidth),
      maxWidth: siderWidth,
      // Fix width transition bug in IE11
      minWidth: siderWidth,
      // https://github.com/ant-design/ant-design/issues/6349
      width: siderWidth
    });

    var siderCls = classNames(className, prefixCls, "".concat(prefixCls, "-").concat(theme), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), !!this.sCollapsed), _defineProperty(_classNames, "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), _defineProperty(_classNames, "".concat(prefixCls, "-below"), !!this.below), _defineProperty(_classNames, "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), _classNames));
    return _vue.createVNode("aside", _vue.mergeProps(divProps, {
      "class": siderCls,
      "style": divStyle
    }), [_vue.createVNode("div", {
      "class": "".concat(prefixCls, "-children")
    }, [getSlot(this)]), collapsible || this.below && zeroWidthTrigger ? triggerDom : null]);
  }
};