/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const ImmutableComponent = require('./immutableComponent')
const cx = require('../lib/classSet.js')
const Dialog = require('./dialog')
const windowActions = require('../actions/windowActions')

class BraveryPanel extends ImmutableComponent {
  get isExtendedValidation () {
    return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
  }
  get isSecure () {
    return this.props.frameProps.getIn(['security', 'isSecure'])
  }
  get isBlockingTrackedContent () {
    return this.blockedByTrackingList && this.blockedByTrackingList.size > 0
  }
  get isMixedContent () {
    return this.props.frameProps.getIn(['security', 'isMixedContent'])
  }
  get blockedByTrackingList () {
    return this.props.frameProps.getIn(['trackingProtection', 'blocked'])
  }
  get isTPListShown () {
    return this.props.braveryPanelDetail.get('expandTrackingProtection')
  }
  get blockedAds () {
    return this.props.frameProps.getIn(['adblock', 'blocked'])
  }
  get isBlockingAds () {
    return this.blockedAds && this.blockedAds.size > 0
  }
  get isBlockedAdsShown () {
    return this.props.braveryPanelDetail.get('expandAdblock')
  }
  get isHttpseShown () {
    return this.props.braveryPanelDetail.get('expandHttpse')
  }
  get redirectedResources () {
    return this.props.frameProps.get('httpsEverywhere')
  }
  get isRedirectingResources () {
    return this.redirectedResources && this.redirectedResources.size > 0
  }
  get partitionNumber () {
    return this.props.frameProps.getIn(['partitionNumber'])
  }
  onToggleTPList (e) {
    windowActions.setBraveryPanelDetail({
      expandTrackingProtection: !this.isTPListShown
    })
    e.stopPropagation()
  }
  onToggleBlockedAds (e) {
    windowActions.setBraveryPanelDetail({
      expandAdblock: !this.isBlockedAdsShown
    })
    e.stopPropagation()
  }
  onToggleHttpseList (e) {
    windowActions.setBraveryPanelDetail({
      expandHttpse: !this.isHttpseShown
    })
    e.stopPropagation()
  }
  render () {
    let secureIcon
    if (this.isSecure && !this.isMixedContent) {
      secureIcon = <li><span
        className={cx({
          fa: true,
          'fa-lock': true,
          extendedValidation: this.isExtendedValidation
        })} /><span data-l10n-id='secureConnection' /></li>
    } else if (this.isMixedContent) {
      secureIcon = <li><span className='fa fa-unlock-alt' /><span data-l10n-id='mixedConnection' /></li>
    } else {
      secureIcon = <li><span className='fa fa-unlock' /><span data-l10n-id='insecureConnection' data-l10n-args={JSON.stringify(l10nArgs)} /></li>
    }

    // Figure out the partition info display
    let l10nArgs = {
      partitionNumber: this.partitionNumber
    }

    let partitionInfo
    if (this.partitionNumber) {
      partitionInfo = <li><span className='fa fa-user' />
        <span data-l10n-args={JSON.stringify(l10nArgs)} data-l10n-id='sessionInfo' /></li>
    }

    return <Dialog onHide={this.props.onHide} className='braveryPanel' isClickDismiss>
      <ul onClick={(e) => e.stopPropagation()}>
      {
        secureIcon
      }
      {
        partitionInfo
      }
      {
        this.isBlockingTrackedContent
        ? <li>
          <a onClick={this.onToggleTPList.bind(this)}><span className='fa fa-shield' />
            <span data-l10n-args={JSON.stringify({blockedTrackingElementsSize: this.blockedByTrackingList.size})}
              data-l10n-id='blockedTrackingElements' />
          </a>
        </li>
        : null
      }
      {
        this.isTPListShown && this.blockedByTrackingList && this.blockedByTrackingList.size > 0
        ? <li><ul>
        {
          this.blockedByTrackingList.map((site) => <li key={site}>{site}</li>)
        }
        </ul></li>
        : null
      }
      {
        this.isBlockingAds
        ? <li>
          <a onClick={this.onToggleBlockedAds.bind(this)}><span className='fa fa-shield' />
            <span data-l10n-args={JSON.stringify({blockedAdsSize: this.blockedAds.size})}
              data-l10n-id='blockedAds' />
          </a>
        </li>
        : null
      }
      {
        this.isBlockingAds && this.isBlockedAdsShown
        ? <li><ul>
        {
          this.blockedAds.map((site) => <li key={site}>{site}</li>)
        }
        </ul></li>
        : null
      }
      {
        this.isRedirectingResources
        ? <li>
          <a onClick={this.onToggleHttpseList.bind(this)}><span className='fa fa-shield' />
            <span data-l10n-args={JSON.stringify({redirectedResourcesSize: this.redirectedResources.size})}
              data-l10n-id='redirectedResources' />
          </a>
        </li>
        : null
      }
      {
        this.isRedirectingResources && this.isHttpseShown
        ? <li><ul>
        {
          this.redirectedResources.map((sites, ruleset) =>
            <li key={ruleset}>{[ruleset, JSON.stringify(sites.toJS())].join(': ')}</li>)
        }
        </ul></li>
        : null
      }
      </ul>
    </Dialog>
  }
}

module.exports = BraveryPanel

@@ -293,49 +293,8 @@
 t')%0A
-const cx = require('../lib/classSet.js')%0A
 cons
@@ -1628,99 +1628,8 @@
   %7D%0A
-  get partitionNumber () %7B%0A    return this.props.frameProps.getIn(%5B'partitionNumber'%5D)%0A  %7D%0A
   on
@@ -2087,928 +2087,8 @@
 ) %7B%0A
-    let secureIcon%0A    if (this.isSecure && !this.isMixedContent) %7B%0A      secureIcon = %3Cli%3E%3Cspan%0A        className=%7Bcx(%7B%0A          fa: true,%0A          'fa-lock': true,%0A          extendedValidation: this.isExtendedValidation%0A        %7D)%7D /%3E%3Cspan data-l10n-id='secureConnection' /%3E%3C/li%3E%0A    %7D else if (this.isMixedContent) %7B%0A      secureIcon = %3Cli%3E%3Cspan className='fa fa-unlock-alt' /%3E%3Cspan data-l10n-id='mixedConnection' /%3E%3C/li%3E%0A    %7D else %7B%0A      secureIcon = %3Cli%3E%3Cspan className='fa fa-unlock' /%3E%3Cspan data-l10n-id='insecureConnection' data-l10n-args=%7BJSON.stringify(l10nArgs)%7D /%3E%3C/li%3E%0A    %7D%0A%0A    // Figure out the partition info display%0A    let l10nArgs = %7B%0A      partitionNumber: this.partitionNumber%0A    %7D%0A%0A    let partitionInfo%0A    if (this.partitionNumber) %7B%0A      partitionInfo = %3Cli%3E%3Cspan className='fa fa-user' /%3E%0A        %3Cspan data-l10n-args=%7BJSON.stringify(l10nArgs)%7D data-l10n-id='sessionInfo' /%3E%3C/li%3E%0A    %7D%0A%0A
     
@@ -2230,81 +2230,8 @@
   %7B%0A
-        secureIcon%0A      %7D%0A      %7B%0A        partitionInfo%0A      %7D%0A      %7B%0A
     

Remove partition number and secure info from Bravery panel