/*
Toggle switch for controlling if the control panel is visible or not.

@copyright (c) Copyright 2017 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

import {h, Component} from 'preact';  /** @jsx h*/

import {connect} from 'preact-redux';
import FontAwesome from 'react-fontawesome';
import PropTypes from 'prop-types';

import appStore from '../store';
import {toggleControlPanelVisibility} from './actions';


class ToggleSwitch_ extends Component {
  static get propTypes() {
    return {
      showPanel: PropTypes.bool
    }
  }

  handleToggle() {
    appStore.dispatch(toggleControlPanelVisibility());
  }

  render() {
    const toggleStyle = {
      backgroundColor: '#171717',
      color: '#ffad00',
      padding: '5px',
      borderRadius: '0 10px 10px 0'
    };

    const displayIcon = this.props.showPanel ? 'close' : 'arrow-right';
    const label = this.props.showPanel ? 'Close Panel' : 'Open Panel';

    return (
      <div onClick={ this.handleToggle } title={ label }>
        <FontAwesome
          name={ displayIcon }
          size='2x'
          style={{...toggleStyle}}
          ariaLabel={ label } />
      </div>
    );
  }
}

export const ToggleSwitch = connect(
  (state) => {
    return {
      'showPanel': state.admin.showPanel
    };
  })(ToggleSwitch_);
