import React from "react";
import { connect } from "react-redux";
import { setVolume } from "../actionCreators";

import { SET_FOCUS, UNSET_FOCUS } from "../actionTypes";

const Volume = props => {
  const { volume } = props;
  const percent = volume / 100;
  const sprite = Math.round(percent * 28);
  const offset = (sprite - 1) * 15;

  const style = {
    backgroundPosition: `0 -${offset}px`
  };

  return (
    <input
      id="volume"
      type="range"
      min="0"
      max="100"
      step="1"
      value={volume}
      style={style}
      onChange={props.setVolume}
      onMouseDown={props.showMarquee}
      onMouseUp={props.hideMarquee}
    />
  );
};

const mapStateToProps = state => state.media;

const mapDispatchToProps = dispatch => ({
  showMarquee: () => dispatch({ type: SET_FOCUS, input: "volume" }),
  hideMarquee: () => dispatch({ type: UNSET_FOCUS }),
  setVolume: e => dispatch(setVolume(e.target.value))
});

export default connect(mapStateToProps, mapDispatchToProps)(Volume);