import React from "react";
import { connect } from "react-redux";
import classNames from "classnames";

import { State } from "../store";
import { MusicState, togglePlay } from "../store/music/types";

type IndicatorProps = {
  muted: boolean;
  playing: boolean;
};

type IndicatorDispatch = {
  play: () => void;
};

type Props = IndicatorProps & IndicatorDispatch;

class Indicator extends React.Component<Props, {}> {
  click() {
    this.props.play();
  }

  render() {
    let classes = classNames({
      btn: true,
      "col-auto": true,
      fas: true,
      "fa-muted": this.props.muted,
      "fa-play": this.props.playing,
      "fa-pause": !this.props.playing,
    });

    return (
      <button
        type="button"
        id="playerIndicator"
        onClick={this.click.bind(this)}
        className={classes}
      ></button>
    );
  }
}

function mapStateToProps(state: State): IndicatorProps {
  return {
    muted: state.musicState.muted,
    playing: state.musicState.playing,
  };
}

function mapDispatchToProps(dispatch: Redux.Dispatch<any>): IndicatorDispatch {
  return {
    play: () => {
      dispatch(togglePlay());
    },
  };
}

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