@media only all and (prefers-color-scheme: dark) {
.highlight .hll { background-color: #49483e }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.
/**
 * ============LICENSE_START========================================================================
 * ONAP : ccsdk feature sdnr wt odlux
 * =================================================================================================
 * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
 * =================================================================================================
 * Licensed 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.
 * ============LICENSE_END==========================================================================
 */
import * as React from 'react';
import * as marked from 'marked';

import { resolvePath } from '../utilities/path';

import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { Connect } from '../../../../framework/src/flux/connect';

import { Markdown } from "../components/markdown";

import '!style-loader!css-loader!github-markdown-css/github-markdown.css'

const mapProps = (state: IApplicationStoreState) => ({
  content: state.help.content,
  currentPath: state.help.currentPath
});

type HelpApplicationComponentProps = Connect<typeof mapProps>;

class HelpApplicationComponent extends React.Component<HelpApplicationComponentProps> {

  /**
   * Initializes a new instance.
   */
  constructor(props: HelpApplicationComponentProps) {
    super(props);

    this.renderer = new marked.Renderer();

    this.renderer.link = (href: string, title: string, text: string) => {
      // check if href is rel or abs
      const absUrlMatch = href.trim().match(/^https?:\/\//i);
      return `<a href="${absUrlMatch ? href : resolvePath('#/help/', this.props.currentPath || '/', href)}" title="${title}" >${text}</a>`
    };

    this.renderer.image = (href: string, title: string) => {
      return `<img src="${resolvePath('/help/', this.props.currentPath || '/', href)}" alt="${title}" />`
    };

  }

  render(): JSX.Element {
    return this.props.content ? (
      <Markdown text={this.props.content} markedOptions={{ renderer: this.renderer }} className="markdown-body"
        style={{ maxWidth: "960px", margin: "1.5em auto" }} />
    ) : (<h2>Loading ...</h2>)
  }

  private renderer: marked.Renderer;
}

export const HelpApplication = connect(mapProps)(HelpApplicationComponent);
export default HelpApplication;