/*
Panel containing control elements for managing sites and pages.

@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 PropTypes from 'prop-types';

import {ConnectedUserLogin} from './UserLoginForm';
import {PageEditor} from './PageEditor';


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

  static SIDEBAR_SIZE = '450px';

  render() {
    const panelStyle = {
      backgroundColor: '#222222',
      color: '#ddd',
      padding: '10px',

      display: 'flex',
      flexDirection: 'column',
      flexBasis: ControlPanel.SIDEBAR_SIZE,
      flexShrink: 0,

      transitionProperty: 'all',
      transitionDuration: '0.5s',
      transitionTimingFunction: 'ease-in-out',
    };

    if (!this.props.showPanel) {
      panelStyle.marginLeft = `-${ControlPanel.SIDEBAR_SIZE}`;
    } else {
      panelStyle.marginLeft = '0';
    }

    const children = this.props.userLoggedIn ?
      (<PageEditor />) : (<div>&nbsp;</div>);

    return (
      <div
        style={{...panelStyle}}
      >
        <div>
          <h1>Rookeries</h1>
          <div style={{textAlign: 'right'}}>version X.Y.Z</div>
        </div>
        <ConnectedUserLogin />
        {children}
      </div>
    );
  }
}


export const ControlPanel = connect(
  (state) => {
    return {
      'userLoggedIn': state.user.token !== '',
      'showPanel': state.admin.showPanel
    };
  })(ControlPanel_);
