import React, { Component } from 'react'

import { Menu, MenuItem, MenuDivider } from "@blueprintjs/core";

export default class StudioMenu extends Component {
  
  handleShaderClick (e) {
    this.props.shaderManager.selectByName(e.target.textContent)
    if (this.props.debug) {
      this.props.debugToaster.show({ message: `Shader set: ${e.target.textContent}`, iconName: 'style'})
    }
  }

  handlePaletteClick (e) {
    this.props.paletteManager.selectByName(e.target.textContent)
    if (this.props.debug) {
      this.props.debugToaster.show({ message: `Palette set: ${e.target.textContent}`, iconName: 'tint'})
    }
  }

  render () {

    let shadersHtml, palettesHtml

    const shaders = this.props.shaderManager.getItems()
    const palettes = this.props.paletteManager.getItems()
    
    if (shaders.length) {
      shadersHtml = (
        <MenuItem
            iconName='style'
            text={this.props.shaderManager.current().name}>
          <MenuDivider title='More Shaders' />
          {shaders.map((sh) => {
            return <MenuItem text={sh.name} key={sh.name}
                      iconName={this.props.shaderManager.current().name === sh.name ? 'tick': 'blank'}
                      onClick={this.handleShaderClick.bind(this)} />
          })}
        </MenuItem>
      )
    } else {
      shadersHtml = <MenuItem text="No shaders" />
    }

    if (palettes.length) {
      palettesHtml = (
        <MenuItem
            iconName='tint'
            text={this.props.paletteManager.current().name}>
          <MenuDivider title='More Palettes' />
          {palettes.map((pp, index) => {
            return <MenuItem text={pp.name} key={pp.name}
                      iconName={this.props.paletteManager.current().name === pp.name ? 'tick': 'blank'}
                      onClick={this.handlePaletteClick.bind(this)} />
          })}
        </MenuItem>
      )
    } else {
      palettesHtml = <MenuItem text="No palettes" />
    }

    return (
      <div className='StudioMenu'>
        <Menu>
          <MenuDivider title='Shader' />
          {shadersHtml}
          <MenuDivider title="Palette" />
          {palettesHtml}
          <MenuDivider />
          <MenuItem text="Settings" iconName="cog" />
        </Menu>
      </div>
    )
  }
}

@@ -1962,24 +1962,357 @@
 %22 /%3E%0A    %7D%0A%0A
+    const fullScreenMenu = this.props.fullScreen ?  ( %3CMenuItem iconName='minimize' text='Exit Full Screen'%0A            onClick=%7Bthis.props.toggleFullScreen%7D label='%E2%8C%98F' /%3E ) :  (%0A                %3CMenuItem iconName='fullscreen' text='Full Screen'%0A                  onClick=%7Bthis.props.toggleFullScreen%7D label='%E2%8C%98F' /%3E%0A              )%0A%0A
     return (
@@ -2460,17 +2460,17 @@
 tle=
-%22
+'
 Palette
-%22
+'
  /%3E%0A
@@ -2516,16 +2516,33 @@
 uDivider
+ title='Playback'
  /%3E%0A    
@@ -2561,38 +2561,295 @@
 tem 
-text=%22Settings%22 iconName=%22cog%22
+iconName='layout-grid' text='Resolution' /%3E%0A          %3CMenuItem iconName='contrast' text='Contrast' /%3E%0A          %3CMenuDivider title='Debug' /%3E%0A          %7BfullScreenMenu%7D%0A          %3CMenuItem iconName='control' text='Toggle controls'%0A            onClick=%7Bthis.props.toggleDebug%7D label='%E2%8C%98H'
  /%3E%0A

add more button