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() {
        return (
            <div id="playerControls" className="container-fluid fixed-bottom">
                <div className="align-items-center row p-2">
                    <Indicator></Indicator>
                    <div
                        id="playerText"
                        className="text-justify text-truncate col-6 playerControlsContent"
                    >
                        {this.props.title.name} - {this.props.title.album}
                    </div>

                    {this.props.title.name === "Journey" &&
                        this.props.title.artist === "Mseq" ? (
                            <div id="copyrightNotice" className="col text-center">
                                <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>
                        ) : null}
                </div>
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(Controls);
