text: /*
   * Licensed to Elasticsearch B.V. under one or more contributor
   * license agreements. See the NOTICE file distributed with
   * this work for additional information regarding copyright
   * ownership. Elasticsearch B.V. licenses this file to you under
   * the Apache License, Version 2.0 (the "License"); you may
   * not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *    http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing,
   * software distributed under the License is distributed on an
   * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
   * KIND, either express or implied.  See the License for the
   * specific language governing permissions and limitations
   * under the License.
   */
  
  import PropTypes from 'prop-types';
  import React, { Component } from 'react';
  import SeriesEditor from '../series_editor';
  import { IndexPattern } from '../index_pattern';
  import 'brace/mode/less';
  import createSelectHandler from '../lib/create_select_handler';
  import createTextHandler from '../lib/create_text_handler';
  import ColorPicker from '../color_picker';
  import YesNo from '../yes_no';
  import MarkdownEditor from '../markdown_editor';
  import less from 'less/lib/less-browser';
  import { KuiCodeEditor } from '@kbn/ui-framework/components';
  import {
    htmlIdGenerator,
    EuiComboBox,
    EuiTabs,
    EuiTab,
    EuiPanel,
    EuiFlexGroup,
    EuiFlexItem,
    EuiFormRow,
    EuiFormLabel,
    EuiSpacer,
    EuiFieldText,
    EuiTitle,
    EuiHorizontalRule,
  } from '@elastic/eui';
  const lessC = less(window, { env: 'production' });
  
  class MarkdownPanelConfig extends Component {
  
    constructor(props) {
      super(props);
      this.state = { selectedTab: 'markdown' };
      this.handleCSSChange = this.handleCSSChange.bind(this);
    }
  
    switchTab(selectedTab) {
      this.setState({ selectedTab });
    }
  
    handleCSSChange(value) {
      const { model } = this.props;
      const lessSrc = `#markdown-${model.id} {
    ${value}
  }`;
      lessC.render(lessSrc, { compress: true }, (e, output) => {
        const parts = { markdown_less: value };
        if (output) {
          parts.markdown_css = output.css;
        }
        this.props.onChange(parts);
      });
    }
  
    render() {
      const defaults = { filter: '' };
      const model = { ...defaults, ...this.props.model };
      const { selectedTab } = this.state;
      const handleSelectChange = createSelectHandler(this.props.onChange);
      const handleTextChange = createTextHandler(this.props.onChange);
  
      const htmlId = htmlIdGenerator();
  
      const alignOptions = [
        { label: 'Top', value: 'top' },
        { label: 'Middle', value: 'middle' },
        { label: 'Bottom', value: 'bottom' }
      ];
      const selectedAlignOption = alignOptions.find(option => {
        return model.markdown_vertical_align === option.value;
      });
      let view;
      if (selectedTab === 'markdown') {
        view = (<MarkdownEditor {...this.props}/>);
      } else if (selectedTab === 'data') {
        view = (
          <SeriesEditor
            colorPicker={false}
            fields={this.props.fields}
            model={this.props.model}
            name={this.props.name}
            onChange={this.props.onChange}
          />
        );
      } else {
        view = (
          <div className="tvbPanelConfig__container">
            <EuiPanel>
              <EuiTitle size="s"><span>Data</span></EuiTitle>
              <EuiSpacer size="m" />
  
              <IndexPattern
                fields={this.props.fields}
                model={this.props.model}
                onChange={this.props.onChange}
              />
  
              <EuiHorizontalRule />
  
              <EuiFlexGroup responsive={false} wrap={true}>
                <EuiFlexItem>
                  <EuiFormRow
                    id={htmlId('panelFilter')}
                    label="Panel filter"
                    fullWidth
                  >
                    <EuiFieldText
                      onChange={handleTextChange('filter')}
                      value={model.filter}
                      fullWidth
                    />
                  </EuiFormRow>
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiFormLabel>Ignore global filter?</EuiFormLabel>
                  <EuiSpacer size="s" />
                  <YesNo
                    value={model.ignore_global_filter}
                    name="ignore_global_filter"
                    onChange={this.props.onChange}
                  />
                </EuiFlexItem>
              </EuiFlexGroup>
            </EuiPanel>
  
            <EuiSpacer />
  
            <EuiPanel>
              <EuiTitle size="s"><span>Style</span></EuiTitle>
              <EuiSpacer size="m" />
  
              <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
                <EuiFlexItem grow={false}>
                  <EuiFormLabel style={{ marginBottom: 0 }}>Background color:</EuiFormLabel>
                </EuiFlexItem>
                <EuiFlexItem>
                  <ColorPicker
                    onChange={this.props.onChange}
                    name="background_color"
                    value={model.background_color}
                  />
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiFormLabel style={{ marginBottom: 0 }}>Show scrollbars?</EuiFormLabel>
                </EuiFlexItem>
                <EuiFlexItem>
                  <YesNo
                    value={model.markdown_scrollbars}
                    name="markdown_scrollbars"
                    onChange={this.props.onChange}
                  />
                </EuiFlexItem>
                <EuiFlexItem grow={false}>
                  <EuiFormLabel style={{ marginBottom: 0 }} htmlFor={htmlId('valign')}>Vertical alignment:</EuiFormLabel>
                </EuiFlexItem>
                <EuiFlexItem>
                  <EuiComboBox
                    id={htmlId('valign')}
                    isClearable={false}
                    options={alignOptions}
                    selectedOptions={selectedAlignOption ? [selectedAlignOption] : []}
                    onChange={handleSelectChange('markdown_vertical_align')}
                    singleSelection={{ asPlainText: true }}
                  />
                </EuiFlexItem>
              </EuiFlexGroup>
  
              <EuiHorizontalRule />
  
              <EuiTitle size="xxs"><span>Custom CSS (supports Less)</span></EuiTitle>
              <EuiSpacer size="s" />
              <KuiCodeEditor
                mode="less"
                theme="github"
                width="100%"
                name={`ace-css-${model.id}`}
                setOptions={{ fontSize: '14px' }}
                value={model.markdown_less}
                onChange={this.handleCSSChange}
              />
            </EuiPanel>
          </div>
        );
      }
      return (
        <div>
          <EuiTabs size="s">
            <EuiTab
              isSelected={selectedTab === 'markdown'}
              onClick={() => this.switchTab('markdown')}
            >
              Markdown
            </EuiTab>
            <EuiTab
              data-test-subj="markdownDataBtn"
              isSelected={selectedTab === 'data'}
              onClick={() => this.switchTab('data')}
            >
              Data
            </EuiTab>
            <EuiTab
              isSelected={selectedTab === 'options'}
              onClick={() => this.switchTab('options')}
            >
              Panel options
            </EuiTab>
          </EuiTabs>
          {view}
        </div>
      );
    }
  }
  
  MarkdownPanelConfig.propTypes = {
    fields: PropTypes.object,
    model: PropTypes.object,
    onChange: PropTypes.func,
    dateFormat: PropTypes.string
  };
  
  export default MarkdownPanelConfig;
  