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

import '../../css/playlist-window.css';

const PlaylistWindow = (props) => {
  const style = {};
  if (props) {
    style.color = props.Normal;
    style.backgroundColor = props.NormalBG;
  }
  return (
    <div id='playlist-window' className='window draggable' style={style}>
      <div className='playlist-left'>
        <div className='playlist-right'>
          <div className='playlist-top title-bar draggable'>
            <div className='playlist-top-left draggable' />
            <div className='playlist-top-title draggable' />
            <div className='playlist-top-right draggable'>
              <div id='close-playlist' />
              <div id='shade-playlist' />
            </div>
          </div>
          <div className='playlist-bottom'>
            <div className='playlist-bottom-left' />
            <div className='playlist-visualizer' />
            <div className='playlist-bottom-right' />
          </div>
        </div>
      </div>
    </div>
  );
};

module.exports = connect((state) => state.display.skinPlaylistStyle)(PlaylistWindow);