// @flow
import React, {Component} from 'react'
import {Button, PlatformIcon, Input, StandardScreen, Text} from '../../common-adapters'
import {NativeKeyboardAvoidingView} from '../../common-adapters/index.native'
import {globalMargins, globalColors} from '../../styles'
import type {Props} from './add'

class PgpAdd extends Component<void, Props, void> {
  render () {
    const nextDisabled = !this.props.email1 || !this.props.fullName
    const emailInputProps = {
      small: true,
      style: styleEmailInput,
      autoCapitalize: 'none',
    }
    return (
      <NativeKeyboardAvoidingView behavior='position'>
        <StandardScreen
          style={styleContainer}
          onClose={this.props.onCancel}>
          {/* TODO(MM) when we get the pgp icon, put it in here */}
          <PlatformIcon
            platform='pgp'
            overlay='icon-proof-unfinished'
            style={styleIcon} />
          <Text
            style={styleHeader}
            type='Body'>
            Fill in your public info:
          </Text>
          <Input
            small={true}
            floatingHintTextOverride='Your full name'
            hintText='Your full name'
            value={this.props.fullName}
            onChangeText={this.props.onChangeFullName} />
          <Input
            {...emailInputProps}
            smallLabel='Email 1:'
            hintText='(required)'
            onChangeText={this.props.onChangeEmail1}
            value={this.props.email1}
            errorText={this.props.errorEmail1 ? 'error' : null} />
          <Input
            {...emailInputProps}
            smallLabel='Email 2:'
            hintText='(optional)'
            onChangeText={this.props.onChangeEmail2}
            value={this.props.email2}
            errorText={this.props.errorEmail2 ? 'error' : null} />
          <Input
            {...emailInputProps}
            smallLabel='Email 3:'
            hintText='(optional)'
            onChangeText={this.props.onChangeEmail3}
            value={this.props.email3}
            errorText={this.props.errorEmail3 ? 'error' : null} />
          <Text
            style={styleInfoMessage(!!this.props.errorText)}
            type='Body'>
            {this.props.errorText || 'Include any addresses you plan to use for PGP encrypted email.'}
          </Text>
          <Button
            style={styleAction}
            type='Primary'
            fullWidth={true}
            label='Let the math begin'
            disabled={nextDisabled}
            onClick={this.props.onNext} />
        </StandardScreen>
      </NativeKeyboardAvoidingView>
    )
  }
}

const styleContainer = {
}

const styleIcon = {
  alignSelf: 'center',
}

const styleHeader = {
  marginTop: globalMargins.medium,
  marginBottom: globalMargins.medium,
  alignSelf: 'center',
}

const styleEmailInput = {
  marginTop: globalMargins.small,
}

const styleInfoMessage = (errorText: boolean) => ({
  marginTop: globalMargins.small,
  textAlign: 'center',
  ...(errorText ? {color: globalColors.red} : {}),
})

const styleAction = {
  marginTop: globalMargins.small + globalMargins.tiny,
}

export default PgpAdd
