import { defineComponent, createVNode } from 'vue';
import '../../../utils/index.mjs';
import InnerSlider from './inner-slider.mjs';
import defaultProps from './default-props.mjs';
import { canUseDOM } from './utils/innerSliderUtils.mjs';
import BaseMixin from '../../../utils/vue/BaseMixin.mjs';
import json2mq from '../../../utils/json2mq.mjs';
import { getSlot } from '../../../utils/vue/props.mjs';
import { cloneElement } from '../../../utils/vue/vnode.mjs';

var VCSlick = /* @__PURE__ */ defineComponent({
  name: "Slider",
  mixins: [BaseMixin],
  inheritAttrs: false,
  props: {
    ...defaultProps
  },
  data() {
    this._responsiveMediaHandlers = [];
    return {
      breakpoint: null
    };
  },
  // handles responsive breakpoints
  mounted() {
    if (this.responsive) {
      const breakpoints = this.responsive.map((breakpt) => breakpt.breakpoint);
      breakpoints.sort((x, y) => x - y);
      breakpoints.forEach((breakpoint, index) => {
        let bQuery;
        if (index === 0) {
          bQuery = json2mq({
            minWidth: 0,
            maxWidth: breakpoint
          });
        } else {
          bQuery = json2mq({
            minWidth: breakpoints[index - 1] + 1,
            maxWidth: breakpoint
          });
        }
        canUseDOM() && this.media(bQuery, () => {
          this.setState({
            breakpoint
          });
        });
      });
      const query = json2mq({
        minWidth: breakpoints.slice(-1)[0]
      });
      canUseDOM() && this.media(query, () => {
        this.setState({
          breakpoint: null
        });
      });
    }
  },
  beforeUnmount() {
    this._responsiveMediaHandlers.forEach((obj) => {
      obj.mql.removeListener(obj.listener);
    });
  },
  methods: {
    innerSliderRefHandler(ref) {
      this.innerSlider = ref;
    },
    media(query, handler) {
      const mql = window.matchMedia(query);
      const listener = ({
        matches
      }) => {
        if (matches)
          handler();
      };
      mql.addListener(listener);
      listener(mql);
      this._responsiveMediaHandlers.push({
        mql,
        query,
        listener
      });
    },
    slickPrev() {
      var _a;
      (_a = this.innerSlider) == null ? void 0 : _a.slickPrev();
    },
    slickNext() {
      var _a;
      (_a = this.innerSlider) == null ? void 0 : _a.slickNext();
    },
    slickGoTo(slide, dontAnimate = false) {
      var _a;
      (_a = this.innerSlider) == null ? void 0 : _a.slickGoTo(slide, dontAnimate);
    },
    slickPause() {
      var _a;
      (_a = this.innerSlider) == null ? void 0 : _a.pause("paused");
    },
    slickPlay() {
      var _a;
      (_a = this.innerSlider) == null ? void 0 : _a.handleAutoPlay("play");
    }
  },
  render() {
    var _a;
    let settings;
    let newProps;
    if (this.breakpoint) {
      newProps = this.responsive.filter((resp) => resp.breakpoint === this.breakpoint);
      settings = newProps[0].settings === "unslick" ? "unslick" : {
        ...this.$props,
        ...newProps[0].settings
      };
    } else {
      settings = {
        ...this.$props
      };
    }
    if (settings.centerMode) {
      if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== "production") {
        console.warn(`slidesToScroll should be equal to 1 in centerMode, you are using ${settings.slidesToScroll}`);
      }
      settings.slidesToScroll = 1;
    }
    if (settings.fade) {
      if (settings.slidesToShow > 1 && process.env.NODE_ENV !== "production") {
        console.warn(`slidesToShow should be equal to 1 when fade is true, you're using ${settings.slidesToShow}`);
      }
      if (settings.slidesToScroll > 1 && process.env.NODE_ENV !== "production") {
        console.warn(`slidesToScroll should be equal to 1 when fade is true, you're using ${settings.slidesToScroll}`);
      }
      settings.slidesToShow = 1;
      settings.slidesToScroll = 1;
    }
    let children = getSlot(this) || [];
    children = children.filter((child) => {
      if (typeof child === "string")
        return !!child.trim();
      return !!child;
    });
    if (settings.variableWidth && (settings.rows > 1 || settings.slidesPerRow > 1)) {
      console.warn(`variableWidth is not supported in case of rows > 1 or slidesPerRow > 1`);
      settings.variableWidth = false;
    }
    const newChildren = [];
    let currentWidth = null;
    for (let i = 0; i < children.length; i += settings.rows * settings.slidesPerRow) {
      const newSlide = [];
      for (let j = i; j < i + settings.rows * settings.slidesPerRow; j += settings.slidesPerRow) {
        const row = [];
        for (let k = j; k < j + settings.slidesPerRow; k += 1) {
          if (settings.variableWidth && ((_a = children[k].props) == null ? void 0 : _a.style))
            currentWidth = children[k].props.style.width;
          if (k >= children.length)
            break;
          row.push(cloneElement(children[k], {
            key: 100 * i + 10 * j + k,
            tabindex: -1,
            style: {
              width: `${100 / settings.slidesPerRow}%`,
              display: "inline-block"
            }
          }));
        }
        newSlide.push(createVNode("div", {
          "key": 10 * i + j
        }, [row]));
      }
      if (settings.variableWidth) {
        newChildren.push(createVNode("div", {
          "key": i,
          "style": {
            width: currentWidth
          }
        }, [newSlide]));
      } else {
        newChildren.push(createVNode("div", {
          "key": i
        }, [newSlide]));
      }
    }
    if (settings === "unslick") {
      const className = `regular slider ${this.className || ""}`;
      return createVNode("div", {
        "class": className
      }, [children]);
    } else if (newChildren.length <= settings.slidesToShow) {
      settings.unslick = true;
    }
    const sliderProps = {
      ...this.$attrs,
      ...settings,
      children: newChildren,
      ref: this.innerSliderRefHandler
    };
    return createVNode(InnerSlider, {
      ...sliderProps,
      "__propsSymbol__": []
    }, this.$slots);
  }
});

export { VCSlick as default };
//# sourceMappingURL=slider.mjs.map
