import React from "react";

import Indicator from "../indicator/Indicator";
import { useAppSelector } from "../../hooks";

function Controls() {
    const title = useAppSelector((state) => state.musicPlayer.title);

    let titleLine = <div className="level-item">{title.name}</div>;

    if (title.name === "Journey" && title.artist === "Mseq") {
        titleLine = (
            <div className="level-item is-size-7-mobile is-flex-shrink-1">
                <div>
                    <a href="http://dig.ccmixter.org/files/Mseq/54702">
                        Journey
                    </a>
                    &nbsp;by Mseq (c) copyright 2016 Licensed under a Creative
                    Commons&nbsp;
                    <a href="http://creativecommons.org/licenses/by-nc/3.0/">
                        Attribution Noncommercial (3.0)
                    </a>
                    &nbsp; license. Ft: Admiral Bob,Texas Radio Fish
                </div>
            </div>
        );
    }

    return (
        <div className="notification is-primary">
            <div className="level is-mobile">
                <div className="level-left is-flex-shrink-1">
                    <Indicator />
                    {titleLine}
                </div>
                <div className="level-right is-hidden-mobile">
                    <div className="level-item">{title.artist}</div>
                </div>
            </div>
        </div>
    );
}

export default Controls;