import React, { Component } from 'react'
import { StyleSheet } from 'react-native'
import nodejs from 'nodejs-mobile-react-native'

import AppText from '../../common/app-text'
import AppTextInput from '../../common/app-text-input'
import Button from '../../common/button'

import { requestHash, changeEncryptionAndRestartApp } from '../../../db'
import { Colors, Spacing } from '../../../styles'
import settings from '../../../i18n/en/settings'

const LISTENER_TYPE = 'create-or-change-pw'

export default class EnterNewPassword extends Component {

  constructor() {
    super()
    this.state = {
      password: '',
      passwordConfirmation: '',
      shouldShowErrorMessage: false,
    }
    nodejs.channel.addListener(
      LISTENER_TYPE,
      changeEncryptionAndRestartApp,
      this
    )
  }

  componentWillUnmount() {
    nodejs.channel.removeListener(LISTENER_TYPE, changeEncryptionAndRestartApp)
  }

  savePassword = () => {
    if (this.comparePasswords()) {
      requestHash(LISTENER_TYPE, this.state.password)
    } else {
      this.setState({ shouldShowErrorMessage: true })
    }
  }

  comparePasswords = () => {
    return this.state.password === this.state.passwordConfirmation
  }

  handlePasswordInput = (password) => {
    this.setState({ password })
  }

  handleConfirmationInput = (passwordConfirmation) => {
    this.setState({ passwordConfirmation })
  }

  render () {
    const {
      password,
      passwordConfirmation,
      shouldShowErrorMessage
    } = this.state
    const labels = settings.passwordSettings
    const isButtonActive =
      (password.length > 0) && (passwordConfirmation.length > 0)

    return (
      <React.Fragment>
        <AppTextInput
          onChangeText={this.handlePasswordInput}
          placeholder={labels.enterNew}
          textContentType="password"
          value={password}
          secureTextEntry={true}
        />
        <AppTextInput
          onChangeText={this.handleConfirmationInput}
          placeholder={labels.confirmPassword}
          textContentType="password"
          value={passwordConfirmation}
          secureTextEntry={true}
        />
        {shouldShowErrorMessage &&
          <AppText style={styles.error}>{labels.passwordsDontMatch}</AppText>
        }
        <Button isCTA={isButtonActive} onPress={this.savePassword}>
          {labels.savePassword}
        </Button>
      </React.Fragment>
    )
  }
}

const styles = StyleSheet.create({
  error: {
    color: Colors.orange,
    marginTop: Spacing.base
  }
})