/*
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 {observer} from 'mobx-observer';
import FontAwesome from 'react-fontawesome';

import {adminStore} from './store';


@observer export class ToggleSwitch extends Component {

  constructor(props) {
    super(props);
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle() {
    adminStore.togglePanel();
  }

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

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

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