import classnames from 'classnames';
import { cloneElement } from '../../_util/vnode';

const getDotCount = function(spec) {
  let dots;

  if (spec.infinite) {
    dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
  } else {
    dots = Math.ceil((spec.slideCount - spec.slidesToShow) / spec.slidesToScroll) + 1;
  }

  return dots;
};

export default {
  functional: true,
  render(createElement, context) {
    const { props, listeners } = context;
    const {
      slideCount,
      slidesToScroll,
      slidesToShow,
      infinite,
      currentSlide,
      appendDots,
      customPaging,
      clickHandler,
      dotsClass,
    } = props;
    const dotCount = getDotCount({
      slideCount,
      slidesToScroll,
      slidesToShow,
      infinite,
    });

    // Apply join & split to Array to pre-fill it for IE8
    //
    // Credit: http://stackoverflow.com/a/13735425/1849458
    const { mouseenter, mouseover, mouseleave } = listeners;
    const mouseEvents = { mouseenter, mouseover, mouseleave };
    const dots = Array.apply(
      null,
      Array(dotCount + 1)
        .join('0')
        .split(''),
    ).map((x, i) => {
      const leftBound = i * slidesToScroll;
      const rightBound = i * slidesToScroll + (slidesToScroll - 1);
      const className = classnames({
        'slick-active': currentSlide >= leftBound && currentSlide <= rightBound,
      });

      const dotOptions = {
        message: 'dots',
        index: i,
        slidesToScroll,
        currentSlide,
      };
      function onClick(e) {
        // In Autoplay the focus stays on clicked button even after transition
        // to next slide. That only goes away by click somewhere outside
        if (e) {
          e.preventDefault();
        }
        clickHandler(dotOptions);
      }
      return (
        <li key={i} class={className}>
          {cloneElement(customPaging({ i }), {
            on: {
              click: onClick,
            },
          })}
        </li>
      );
    });

    return cloneElement(appendDots({ dots }), {
      class: dotsClass,
      on: {
        ...mouseEvents,
      },
    });
  },
};