import React from 'react';
import {ButtonGroup} from 'react-bootstrap';
import UIStore from './../stores/UIStore';
import CreateButton from './CreateButton';
import ReportButton from './ReportButton';
import ExportImportButton from './ExportImportButton';
import ScanCodeButton from './ScanCodeButton';

export default class ContextActions extends React.Component {
  constructor(props) {
    super(props);
    const uiState = UIStore.getState();
    this.state = {
      uiState
    }
  }

  componentDidMount() {
    UIStore.listen(state => this.onChange(state));
  }

  componentWillUnmount() {
    UIStore.unlisten(state => this.onChange(state));
  }

  onChange(state) {
    const uiState = state;
    this.setState({
      uiState
    });
  }

  isAllCollection() {
    const {currentCollection} = this.state.uiState;
    return currentCollection && currentCollection.label == 'All';
  }

  isDisabled() {
    const {currentCollection} = this.state.uiState

    if (currentCollection) {
      if (currentCollection.label == 'All' ||
          (currentCollection.is_shared == true && currentCollection.permission_level < 4))
      return true
    }

    return false
  }

  render() {
    const { updateModalProps } = this.props;
    return (
      <div style={{display: 'inline', float: 'left'}}>
        <ButtonGroup>
          <ExportImportButton isDisabled={this.isDisabled()}
                              updateModalProps={updateModalProps} />
          <ReportButton />
        </ButtonGroup>
        <ButtonGroup style={{marginLeft: '10px'}}>
          <CreateButton isDisabled={this.isAllCollection()}/>
        </ButtonGroup>
        <ButtonGroup style={{marginLeft: '10px'}}>
          <ScanCodeButton/>
        </ButtonGroup>
      </div>
    )
  }
}

ContextActions.propTypes = {
  updateModalProps: React.PropTypes.func.isRequired,
};

@@ -39,16 +39,66 @@
 tonGroup
+, OverlayTrigger, DropdownButton, Button, MenuItem
 %7D from '
@@ -1782,24 +1782,53 @@
 uttonGroup%3E%0A
+        %3CDeviceButtonSplit/%3E%0A
       %3C/div%3E
@@ -1926,8 +1926,1077 @@
 red,%0A%7D;%0A
+%0Aconst DeviceButtonSplit = () =%3E %7B%0A  return (%0A  %3CButtonGroup style=%7B%7BmarginLeft: '10px'%7D%7D%3E%0A    %3COverlayTrigger placement=%22bottom%22 overlay=%7B%3CDeviceTooltip/%3E%7D%3E%0A      %3CButton %0A        bsStyle=%22warning%22%0A        disabled=%7Btrue%7D%0A        onClick=%7B() =%3E %7B%7D%7D%0A      %3E%0A        UI%0A      %3C/Button%3E%0A      %3C/OverlayTrigger%3E%0A      %3CDropdownButton%0A        bsStyle=%22warning%22%0A        title=%7B%3CDropdownButtonTitle/%3E%7D%0A        style=%7B%7Bwidth: %2226px%22, paddingLeft: %228px%22%7D%7D%0A      %3E%0A        %3CMenuItem%0A          onSelect=%7B() =%3E %7B%7D%7D%0A        %3E%0A          Device 1%0A        %3C/MenuItem%3E%0A        %3CMenuItem%0A          onSelect=%7B() =%3E %7B%7D%7D%0A        %3E%0A          Device 2%0A        %3C/MenuItem%3E%0A        %3CMenuItem%0A          onSelect=%7B() =%3E %7B%7D%7D%0A        %3E%0A          Device 3%0A        %3C/MenuItem%3E%0A        %3CMenuItem divider /%3E%0A        %3CMenuItem%0A          onSelect=%7B() =%3E %7B%7D%7D%0A        %3E%0A          Device Management%0A        %3C/MenuItem%3E%0A      %3C/DropdownButton%3E%0A    %3C/ButtonGroup%3E%0A  )%0A%7D%0A%0Aconst DeviceTooltip = () =%3E%0A  %3CTooltip id=%22create_button%22%3E%0A    Open Device%0A  %3C/Tooltip%3E%0A%0Aconst DropdownButtonTitle = () =%3E%0A  %3Cdiv%3E%3C/div%3E%0A

add device-button