import React from "react";

import classNames from "classnames";
import PropTypes from "prop-types";

import kind from "@enact/core/kind";
import Slider from "@enact/sandstone/Slider";
import Spotlight from "@enact/spotlight";

import MediaKnob from "./MediaKnob";
import css from "./MediaSlider.module.less";
import MediaSliderDecorator from "./MediaSliderDecorator";

/**
 * The base component to render a customized [Slider]{@link sandstone/Slider.Slider} for use in
 * media player components such as [VideoPlayer]{@link sandstone/VideoPlayer.VideoPlayer}.
 *
 * @class MediaSliderBase
 * @memberof sandstone/MediaPlayer
 * @ui
 * @private
 */
const MediaSliderBase = kind({
  name: "MediaSlider",

  propTypes: /** @lends sandstone/MediaPlayer.MediaSlider.prototype */ {
    /**
     * When `true`, the knob will expand. Note that Slider is a controlled
     * component. Changing the value would only affect pressed visual and
     * not the state.
     *
     * @type {Boolean}
     * @public
     */
    forcePressed: PropTypes.bool,

    /**
     * Allow moving the knob via pointer or 5-way without emitting `onChange` events
     *
     * @type {Boolean}
     * @default false
     * @public
     */
    preview: PropTypes.bool,

    /**
     * The position of the knob when in `preview` mode
     *
     * @type {Number}
     * @public
     */
    previewProportion: PropTypes.number,

    /**
     * The visibility of the component. When `false`, the component will be hidden.
     *
     * @type {Boolean}
     * @default true
     * @public
     */
    visible: PropTypes.bool,
  },

  defaultProps: {
    preview: false,
    visible: true,
  },

  styles: {
    css,
    className: "sliderFrame",
  },

  computed: {
    className: ({ styler, visible }) => styler.append({ hidden: !visible }),
    sliderClassName: ({ styler, forcePressed }) =>
      styler.join({
        pressed: forcePressed,
        mediaSlider: true,
      }),
  },

  render: ({
    className,
    preview,
    previewProportion,
    sliderClassName,
    onFocus,
    type,
    spotlightDisabled,
    videoVerticalVisible,
    onChange,
    // onKeyDown,
    ...rest
  }) => {
    delete rest.forcePressed;
    delete rest.visible;

    const onSpotlightDown = () => {
      Spotlight.focus("videoIndicator-down-button");
    };

    return (
      <div
        className={classNames(
          className,
          videoVerticalVisible && css.videoVertical
        )}
      >
        <Slider
          {...rest}
          onChange={type !== "LIVE" && onChange}
          onFocus={type !== "LIVE" && onFocus}
          aria-hidden="true"
          className={sliderClassName}
          css={css}
          knobComponent={
            <MediaKnob
              preview={preview}
              previewProportion={previewProportion}
            />
          }
          max={1}
          min={0}
          step={0.00001}
          spotlightDisabled={type === "LIVE"}
          // onKeyDown={_onKeyDown}
          onSpotlightDown={onSpotlightDown}
          // onSpotlightUp={onSpotlightUp}
        />
      </div>
    );
  },
});

/**
 * A customized slider suitable for use within media player components such as
 * [VideoPlayer]{@link sandstone/VideoPlayer.VideoPlayer}.
 *
 * @class MediaSlider
 * @extends sandstone/Slider.Slider
 * @memberof sandstone/MediaPlayer
 * @ui
 * @public
 */
const MediaSlider = MediaSliderDecorator(MediaSliderBase);

export default MediaSlider;
export { MediaSlider, MediaSliderBase };
