content: import React from 'react';
  import Environment from '../environment/environment.js';
  import {BaseMixin, ElementaryMixin, SectionMixin, LsiMixin} from '../common/common.js';
  import {Glyphicon, Footer, Section, Div, Line, Block, Iframe, Button, ButtonGroup, ButtonSwitch, Pre, FileViewer} from '../bricks/bricks.js';
  
  import './demo.less';
  
  export default React.createClass({
  
    //@@viewOn:mixins
    mixins: [
      BaseMixin,
      ElementaryMixin,
      SectionMixin,
      LsiMixin
    ],
  
    statics: {
      tagName: 'UU5.DocKit.Demo',
      opt: {
        dummyLevel: true,
        increaseLevel: true,
      },
      classNames: {
        main: 'uu5-doc-kit-demo',
        previewBlock: 'uu5-doc-kit-demo-preview-block',
        previewIframe: 'uu5-doc-kit-demo-preview-iframe',
        sourceBlock: 'uu5-doc-kit-demo-source-block',
        sourcePre: 'uu5-doc-kit-demo-source-pre',
        example: 'uu5-doc-kit-demo-example'
      },
      defaults: {
        blockStart: '\@\@viewOn:',
        blockEnd: '\@\@viewOff:',
        example: 'uu-glyphicon-example'
      },
      lsi: {
        //TODO pointers to UU5.LSI ?!
        header: {
          en: "Example",
          cs: "Příklad",
          sk: "TODO-Translate please!!!"
        },
        previewHeader: {
          en: "Preview",
          cs: "Náhled",
          sk: "TODO-Translate please!!!"
        },
        completeSourceHeader: {
          en: "Source",
          cs: "Zdrojový kód <small>(celý)</small>",
          sk: "TODO-Translate please!!!"
        },
        blockSourceHeader: {
          en: "Source",
          cs: "Zdrojový kód <small>(vybraný blok)</small>",
          sk: "TODO-Translate please!!!"
        },
        noteHeader: {
          en: "Note",
          cs: "Poznámka",
          sk: "TODO-Translate please!!!"
        },
        tryMeButton: {
          en: "Try Me..",
          cs: "Zkus mě..",
          sk: "TODO-Translate please!!!"
        },
        tryMeButtonTitle: {
          en: "Translate please!!!",
          cs: "Stisknutím spustíte příklad v samostatném okně.",
          sk: "TODO-Translate please!!!"
        },
        sourceSwitch: {
          en: "TODO-Translate please!!!",
          cs: "Zdrojový kód",
          sk: "TODO-Translate please!!!"
        },
        sourceSwitchTitleOn: {
          en: "TODO-Translate please!!!",
          cs: "Vypnutím schováte zdrojový kód.",
          sk: "TODO-Translate please!!!"
        },
        sourceSwitchTitleOff: {
          en: "TODO-Translate please!!!",
          cs: "Zapnutím ukážete zdrojový kód.",
          sk: "TODO-Translate please!!!"
        },
        completeSourceSwitch: {
          en: "TODO-Translate please!!!",
          cs: "Celý kód",
          sk: "TODO-Translate please!!!"
        },
        completeSourceSwitchTitleOn: {
          en: "TODO-Translate please!!!",
          cs: "Vypnutím získáte pouze vybraný blok zdrojového kódu.",
          sk: "TODO-Translate please!!!"
        },
        completeSourceSwitchTitleOff: {
          en: "TODO-Translate please!!!",
          cs: "Zapnutím získáte celý zdrojový kód.",
          sk: "TODO-Translate please!!!"
        },
      }
    },
  
    propTypes: {
      previewColorSchema: React.PropTypes.oneOf(Environment.colorSchema),
      sourceColorSchema: React.PropTypes.oneOf(Environment.colorSchema),
      noteColorSchema: React.PropTypes.oneOf(Environment.colorSchema),
      buttonColorSchema: React.PropTypes.oneOf(Environment.colorSchema),
      src: React.PropTypes.string,
      numbered: React.PropTypes.bool,
      blockKey: React.PropTypes.string,
      showSource: React.PropTypes.bool,
      showCompleteSource: React.PropTypes.bool
    },
  
    // Setting defaults
    getDefaultProps: function () {
      return {
        previewColorSchema: 'success',
        sourceColorSchema: 'info',
        buttonColorSchema: 'primary',
        noteColorSchema: 'default',
        src: null,
        numbered: false,
        blockKey: null,
        showSource: false,
        showCompleteSource: false
      };
    },
  
    getInitialState: function () {
      return {
        sourceHidden: !this.props.showSource,
        showCompleteSource: this.props.showCompleteSource
      };
    },
  
    // Interface
  
    // Overriding Functions
  
    // Component Specific Helpers
    _getMainProps: function () {
      var mainProps = this.getMainPropsToPass(
        [
          'UU5_Common_BaseMixin',
          'UU5_Common_ElementaryMixin',
          'UU5_Common_SectionMixin'
        ]
      );
      mainProps.content = null;
      mainProps.header = [
        <Glyphicon glyphicon={this.getDefault().example} className={this.getClassName().example} />,
        mainProps.header || this.getLSIComponent('header')
      ];
      mainProps.footer = mainProps.footer || this._getFooter();
      return mainProps;
    },
  
    _getFooter: function () {
      return {
        element: <Footer
          className="uu5-common-right"
        >
          {this.props.src}
        </Footer>
      }
    },
  
    _tryMeButtonHandler: function () {
      window.open(this.props.src, '_blank');
      return this;
    },
  
    _sourceSwitchHandler: function () {
      this.setState(function (state) {
        return {
          sourceHidden: !state.sourceHidden
        }
      });
      return this;
    },
  
    _completeSourceSwitchHandler: function () {
      this.setState(function (state) {
        return {
          showCompleteSource: !state.showCompleteSource
        }
      });
      return this;
    },
  
    // Render
    render: function () {
      return (
        <Section {...this._getMainProps()}>
          <Section
            header={
              <Div>
                <Line colorSchema={this.props.noteColorSchema} />
                {this.getLSIComponent('previewHeader')}
              </Div>
            }
          >
            <Block
              colorSchema={this.props.previewColorSchema}
              className={this.getClassName().previewBlock}
            >
              <Iframe
                resize
                src={this.props.src}
                className={this.getClassName().previewIframe}
              />
            </Block>
            <br />
            <Button
              colorSchema={this.props.previewColorSchema}
              content={this.getLSIComponent('tryMeButton')}
              title={this.getLSIValue('tryMeButtonTitle')}
              onClick={this._tryMeButtonHandler}
            />&nbsp;
            <ButtonGroup >
              <ButtonSwitch
                onProps={{
                  pressed: true,
                  title: this.getLSIValue('sourceSwitchTitleOn')
                }}
                offProps={{
                  pressed: false,
                  title: this.getLSIValue('sourceSwitchTitleOff')
                }}
                props={{
                  content: this.getLSIComponent('sourceSwitch'),
                  colorSchema: this.props.buttonColorSchema,
                  onClick: this._sourceSwitchHandler
                }}
                switchedOn={!this.state.sourceHidden}
              />
              <ButtonSwitch
                onProps={{
                  pressed: true,
                  title: this.getLSIValue('completeSourceSwitchTitleOn')
                }}
                offProps={{
                  pressed: false,
                  title: this.getLSIValue('completeSourceSwitchTitleOff')
                }}
                props={{
                  content: this.getLSIComponent('completeSourceSwitch'),
                  colorSchema: this.props.buttonColorSchema,
                  onClick: this._completeSourceSwitchHandler,
                  disabled: this.state.sourceHidden
                }}
                switchedOn={this.state.showCompleteSource}
              />
            </ButtonGroup>
          </Section>
          <Section
            header={
              <Div>
                <Line colorSchema={this.props.noteColorSchema} />
                {
                  this.state.showCompleteSource
                    ? this.getLSIComponent('completeSourceHeader')
                    : this.getLSIComponent('blockSourceHeader')
                }
              </Div>
            }
            hidden={this.state.sourceHidden}
          >
            <Block
              colorSchema={this.props.sourceColorSchema}
              className={this.getClassName().sourceBlock}
            >
              <Pre className={this.getClassName().sourcePre}>
                <FileViewer
                  src={this.props.src}
                  numbered={this.props.numbered}
                  blockKey={!this.state.showCompleteSource ? this.props.blockKey : null}
                />
              </Pre>
            </Block>
          </Section>
          <Section
            header={
              <Div>
                <Line colorSchema={this.props.noteColorSchema} />
                {this.getLSIComponent('noteHeader')}
              </Div>
            }
            hidden={!this.getChildren()}
          >
            {this.getChildren()}
          </Section>
        </Section>
      );
    }
  });
  
  