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

import { Dispatch, State } from "../store";
import { 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, State> {
    click() {
        this.props.play();
    }

    render() {
        const 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: Dispatch): IndicatorDispatch {
    return {
        play: () => {
            dispatch(togglePlay());
        },
    };
}

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