/* @flow */

import React, {Component} from 'react'
import {View, Text} from 'react-native'

import openUrl from '../util/open-url'
import * as shared from './user-proofs.shared'
import {metaNone} from '../constants/tracker'
import {Icon, Meta} from '../common-adapters/index'
import {globalStyles, globalColors, globalMargins} from '../styles/style-guide'
import {checking as proofChecking} from '../constants/tracker'

import type {Props, Proof} from './user-proofs'

export default class ProofsRender extends Component {
  props: Props;

  _ensureUrlProtocal (url: string): string {
    return url && (url.indexOf('://') === -1 ? 'http://' : '') + url
  }

  _onClickProof (proof: Proof): void {
    if (proof.state !== proofChecking && proof.humanUrl) {
      openUrl(this._ensureUrlProtocal(proof.humanUrl))
    }
  }

  _onClickProfile (proof: Proof): void {
    if (proof.state !== proofChecking && proof.profileUrl) {
      openUrl(this._ensureUrlProtocal(proof.profileUrl))
    }
  }

  _renderProofRow (proof: Proof, idx: number) {
    const metaBackgroundColor = shared.metaColor(proof)
    const proofStatusIconType = shared.proofStatusIcon(proof)
    const proofNameStyle = shared.proofNameStyle(proof)
    const onClickProfile = () => { this._onClickProfile(proof) }

    const meta = proof.meta && proof.meta !== metaNone && <Meta title={proof.meta} style={{backgroundColor: metaBackgroundColor}} />

    const proofIcon = proofStatusIconType && <Icon type={proofStatusIconType} style={stylesStatusIcon} onClick={() => this._onClickProof(proof)} />

    return (
      <View style={{...stylesRow, paddingTop: idx > 0 ? 8 : 0}} key={`${proof.id}${proof.type}`}>
        <Icon style={stylesService} type={shared.iconNameForProof(proof)} title={proof.type} onClick={onClickProfile} />
        <View style={stylesProofNameSection}>
          <View style={stylesProofNameLabelContainer}>
            <Text inline type='Body' onPress={onClickProfile} style={stylesProofName}>
              <Text inline type='Body' style={proofNameStyle}>{proof.name}</Text>
              <Text inline type='Body' style={stylesProofType}>@{proof.type}</Text>
            </Text>
            {meta}
          </View>
        </View>
        {proofIcon}
      </View>
    )
  }

  render () {
    return (
      <View style={{...stylesContainer, ...this.props.style}}>
        {this.props.proofs.map((p, idx) => this._renderProofRow(p, idx))}
      </View>
    )
  }
}

const stylesContainer = {
  ...globalStyles.flexBoxColumn,
  backgroundColor: globalColors.white,
  alignItems: 'stretch',
}
const stylesRow = {
  ...globalStyles.flexBoxRow,
  alignItems: 'flex-start',
  justifyContent: 'flex-start',
  // RN-BUG: set maxWidth once that prop is supported
}
const stylesService = {
  ...globalStyles.clickable,
  fontSize: 20,
  width: 22,
  textAlign: 'center',
  color: globalColors.black_75,
  marginRight: globalMargins.small,
}
const stylesStatusIcon = {
  ...globalStyles.clickable,
  fontSize: 24,
  marginLeft: globalMargins.small,
}
const stylesProofNameSection = {
  ...globalStyles.flexBoxRow,
  alignItems: 'flex-start',
  flex: 1,
}
const stylesProofNameLabelContainer = {
  ...globalStyles.flexBoxColumn,
  flex: 1,
}
const stylesProofName = {
  ...globalStyles.clickable,
  flex: 1,
}
const stylesProofType = {
  color: globalColors.black_10,
}

@@ -49,49 +49,8 @@
 ct'%0A
-import %7BView, Text%7D from 'react-native'%0A%0A
 impo
@@ -185,16 +185,21 @@
 import %7B
+Box, 
 Icon, Me
@@ -200,16 +200,22 @@
 on, Meta
+, Text
 %7D from '
@@ -1540,36 +1540,35 @@
 return (%0A      %3C
-View
+Box
  style=%7B%7B...styl
@@ -1760,36 +1760,35 @@
 le%7D /%3E%0A        %3C
-View
+Box
  style=%7BstylesPr
@@ -1811,28 +1811,27 @@
 %0A          %3C
-View
+Box
  style=%7Bstyl
@@ -2154,36 +2154,35 @@
 ta%7D%0A          %3C/
-View
+Box
 %3E%0A        %3C/View
@@ -2173,28 +2173,27 @@
 %3E%0A        %3C/
-View
+Box
 %3E%0A        %7Bp
@@ -2202,36 +2202,35 @@
 ofIcon%7D%0A      %3C/
-View
+Box
 %3E%0A    )%0A  %7D%0A%0A  r
@@ -2260,20 +2260,19 @@
 %0A      %3C
-View
+Box
  style=%7B
@@ -2401,12 +2401,11 @@
   %3C/
-View
+Box
 %3E%0A  

Clean up user proofs native component to use our Box/Text