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

import { State } from "../store";
import { Title } from "../store/music/types";
import Indicator from "./indicator";

type ControlProps = {
    title: Title;
};

class Controls extends React.Component<ControlProps, State> {
    render() {
        let title = (
            <div className="notification is-primary">
                <div className="level-item">{this.props.title.name}</div>
            </div>
        );

        if (
            this.props.title.name == "Journey" &&
            this.props.title.artist == "Mseq"
        ) {
            title = (
                <div className="notification is-primary">
                    <div className="level-item">
                        <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">
                    <div className="level-left">
                        <Indicator></Indicator>
                        {title}
                    </div>
                    <div className="level-right">
                        <div className="level-item">
                            {this.props.title.artist}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function mapStateToProps(state: State): ControlProps {
    return {
        title: state.musicState.title,
    };
}

export default connect(mapStateToProps)(Controls);
