import React from "react";

import PropTypes from "prop-types";

import kind from "@enact/core/kind";
import { Knob } from "@enact/ui/Slider";

/**
 * Knob for the MediaSlider in {@link sandstone/MediaPlayer}.
 *
 * @class MediaKnob
 * @memberof sandstone/MediaPlayer
 * @ui
 * @private
 */
const MediaKnob = kind({
  name: "MediaKnob",

  propTypes: {
    preview: PropTypes.bool,
    previewProportion: PropTypes.number,
    value: PropTypes.number,
  },

  computed: {
    style: ({ style, preview, previewProportion, value }) => {
      if (!preview) {
        return {
          ...style,
          left: value*100+'%' //for chrome 38
        };
      }
      return {
        ...style,
        "--ui-slider-proportion-end-knob": previewProportion,
        left: previewProportion*100+'%' //for chrome 38
      };
    }
  },

  render: ({ preview, previewProportion, value, ...rest }) => {
    if (preview) {
      value = previewProportion;
    }

    return <Knob {...rest} proportion={value} value={value} spotlightDisable />;
  },
});

export default MediaKnob;
export { MediaKnob };
