import React from 'react'
import PropTypes from 'prop-types'

import { connect } from 'react-redux'

import Product from '../version'
import { fixedStrings } from '../branding'

const LegalInfo = () => {
  if (fixedStrings.LEGAL_INFO_LINK_TEXT && fixedStrings.LEGAL_INFO_LINK_URL) {
    return (
      <div className='trademark-pf'>
        {fixedStrings.LEGAL_INFO} &nbsp;
        <a href={fixedStrings.LEGAL_INFO_LINK_URL} target='_blank'>{fixedStrings.LEGAL_INFO_LINK_TEXT}</a>
      </div>
    )
  }
  return (
    <div className='trademark-pf'>
      {fixedStrings.LEGAL_INFO}
    </div>
  )
}

const AboutDialog = ({ oVirtApiVersion }) => {
  // TODO: link documentation: https://github.com/oVirt/ovirt-web-ui/issues/134
  // TODO: oVirt API version

  let apiVersion = 'unknown'
  if (oVirtApiVersion && oVirtApiVersion.get('major')) {
    apiVersion = `${oVirtApiVersion.get('major')}.${oVirtApiVersion.get('minor')}`
    console.log(apiVersion)
  }

  return (
    <div className='modal fade' id='about-modal' tabIndex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
      <div className='modal-dialog'>
        <div className='modal-content about-modal-pf obrand_aboutBackground'>
          <div className='modal-header'>
            <button type='button' className='close' data-dismiss='modal' aria-hidden='true'>
              <span className='pficon pficon-close' />
            </button>
          </div>
          <div className='modal-body'>
            <h1>{fixedStrings.BRAND_NAME} VM Portal</h1>
            <div className='product-versions-pf'>
              <ul className='list-unstyled'>
                <li>Version <strong>{Product.version}-{Product.release}</strong></li>
                <li>{fixedStrings.BRAND_NAME} API Version <strong>{apiVersion}</strong></li>
                <li>Please report issues on <strong><a href='https://github.com/oVirt/ovirt-web-ui/issues' target='_blank'>GitHub Issue Tracker</a></strong></li>
              </ul>
            </div>

            <LegalInfo />

          </div>
          <div className='modal-footer'>
            <div className='obrand_aboutApplicationLogo' />
          </div>
        </div>
      </div>
    </div>
  )
}
AboutDialog.propTypes = {
  oVirtApiVersion: PropTypes.object,
}

export default connect(
  (state) => ({
    oVirtApiVersion: state.config.get('oVirtApiVersion'),
  })
)(AboutDialog)

@@ -197,16 +197,49 @@
 () =%3E %7B%0A
+  const idPrefix = %60about-legal%60%0A
   if (fi
@@ -349,32 +349,61 @@
 e='trademark-pf'
+ id=%7B%60$%7BidPrefix%7D-trademark%60%7D
 %3E%0A        %7Bfixed
@@ -495,16 +495,40 @@
 '_blank'
+ id=%7B%60$%7BidPrefix%7D-link%60%7D
 %3E%7BfixedS
@@ -623,24 +623,53 @@
 rademark-pf'
+ id=%7B%60$%7BidPrefix%7D-trademark%60%7D
 %3E%0A      %7Bfix
@@ -865,16 +865,44 @@
 ersion%0A%0A
+  const idPrefix = %60about%60%0A%0A
   let ap
@@ -1473,32 +1473,57 @@
 ia-hidden='true'
+ id=%7B%60$%7BidPrefix%7D-close%60%7D
 %3E%0A              
@@ -1656,16 +1656,41 @@
      %3Ch1
+ id=%7B%60$%7BidPrefix%7D-title%60%7D
 %3E%7BfixedS
@@ -1841,24 +1841,84 @@
  %3Cli
-%3EVersion %3Cstrong
+ id=%7B%60$%7BidPrefix%7D-version%60%7D%3EVersion %3Cstrong id=%7B%60$%7BidPrefix%7D-version-value%60%7D
 %3E%7BPr
@@ -1983,16 +1983,46 @@
      %3Cli
+ id=%7B%60$%7BidPrefix%7D-apiversion%60%7D
 %3E%7BfixedS
@@ -2059,16 +2059,52 @@
  %3Cstrong
+ id=%7B%60$%7BidPrefix%7D-apiversion-value%60%7D
 %3E%7BapiVer
@@ -2142,16 +2142,42 @@
      %3Cli
+ id=%7B%60$%7BidPrefix%7D-issues%60%7D
 %3EPlease 
@@ -2271,16 +2271,47 @@
 '_blank'
+ id=%7B%60$%7BidPrefix%7D-issues-link%60%7D
 %3EGitHub 
@@ -2523,16 +2523,43 @@
 ionLogo'
+ id=%7B%60$%7BidPrefix%7D-applogo%60%7D
  /%3E%0A    

Add HTML IDs to About