import React from "react";
import classNames from "classnames";

import { useAppSelector, useAppDispatch } from "../../hooks";
import { togglePlay, PlayState } from "../musicplayer/musicPlayerSlice";

function Indicator() {
    const playing = useAppSelector((state) => state.musicPlayer.playing);
    const muted = useAppSelector((state) => state.musicPlayer.muted);
    const dispatch = useAppDispatch();

    const buttonClass = classNames({
        button: true,
        "is-primary": true,
        "level-item": true,
        "is-loading": playing === PlayState.Loading,
    });

    const iconClass = classNames({
        fas: true,
        "fa-2x": true,
        "fa-muted": muted,
        "fa-play": playing === PlayState.Paused,
        "fa-pause": playing === PlayState.Playing,
    });

    return (
        <button
            type="button"
            onClick={() => {
                dispatch(togglePlay(null)).catch((e) => {
                    console.error(e);
                });
            }}
            className={buttonClass}
        >
            <span className="icon is-medium">
                <i className={iconClass}></i>
            </span>
        </button>
    );
}

export default Indicator;