// @flow
import * as React from 'react';
import { Component, Text, View, Animated, Styles } from 'reactxp';
import { Layout, Container, Header } from './Layout';
import AccountInput from './AccountInput';
import Accordion from './Accordion';
import { formatAccount } from '../lib/formatters';
import Img from './Img';
import { BlueButton, Label, CellButton } from './styled';
import styles from './LoginStyles';
import { colors } from '../config';

import type { AccountReduxState } from '../redux/account/reducers';
import type { AccountToken } from '../lib/ipc-facade';

export type LoginPropTypes = {
  account: AccountReduxState,
  onLogin: (accountToken: AccountToken) => void,
  onSettings: ?(() => void),
  onFirstChangeAfterFailure: () => void,
  onExternalLink: (type: string) => void,
  onAccountTokenChange: (accountToken: AccountToken) => void,
  onRemoveAccountTokenFromHistory: (accountToken: AccountToken) => void,
};

type State = {
  notifyOnFirstChangeAfterFailure: boolean,
  isActive: boolean,
  footerHeight: number,
  animatedFooterValue: Animated.Value,
  animatedLoginButtonValue: Animated.Value,
  animation: ?Animated.CompositeAnimation,
  footerAnimationStyle: ?Animated.Style,
  loginButtonAnimationStyle: ?Animated.Style,
};

export default class Login extends Component<LoginPropTypes, State> {
  state = {
    notifyOnFirstChangeAfterFailure: false,
    isActive: true,
    footerHeight: 0,
    animatedFooterValue: Animated.createValue(0),
    animatedLoginButtonValue: Animated.createValue(0),
    animation: null,
    footerAnimationStyle: {},
    loginButtonAnimationStyle: {},
  };

  constructor(props: LoginPropTypes) {
    super(props);
    if(props.account.status === 'failed') {
      this.state.notifyOnFirstChangeAfterFailure = true;
    }
    this.state.footerAnimationStyle = Styles.createAnimatedViewStyle({
      transform: [{translateY: this.state.animatedFooterValue }]
    });
    this.state.loginButtonAnimationStyle = Styles.createAnimatedViewStyle({
      backgroundColor: Animated.interpolate(this.state.animatedLoginButtonValue, [0.0, 1.0], [colors.white, colors.green]),
    });
  }

  componentWillReceiveProps(nextProps: LoginPropTypes) {
    const prev = this.props.account || {};
    const next = nextProps.account || {};

    if(prev.status !== next.status && next.status === 'failed') {
      this.setState({ notifyOnFirstChangeAfterFailure: true });
    }

    this._animate(nextProps);
  }

  render() {
    return (
      <Layout>
        <Header showSettings={ true } onSettings={ this.props.onSettings } />
        <Container>
          <View style={styles.login_form}>
            { this._getStatusIcon() }
            <Text style={styles.title}>{ this._formTitle() }</Text>

            {this._shouldShowLoginForm() && <View>
              { this._createLoginForm() }
            </View>}
          </View>

          <Animated.View onLayout={this._onFooterLayout} style={[styles.login_footer, this.state.footerAnimationStyle]} testName={'footerVisibility ' + this._shouldShowFooter(this.props).toString()}>
            { this._createFooter() }
          </Animated.View>
        </Container>
      </Layout>
    );
  }

  _onCreateAccount = () => this.props.onExternalLink('createAccount')

  _onFocus = () => this.setState({ isActive: true }, () => {
    this._animate(this.props);
  })

  _onBlur = (e) => {
    const relatedTarget = e.relatedTarget;

    // restore focus if click happened within dropdown
    if(relatedTarget) {
      e.target.focus();
      return;
    }

    this.setState({ isActive: false }, () => {
      this._animate(this.props);
    });
  }

  _animate = (props: LoginPropTypes) => {
    if (this.state.animation) {
      this.state.animation.stop();
    }
    const accountToken = props.account.accountToken || [];

    const footerPosition = this._shouldShowFooter(props) ? 0 : this.state.footerHeight;
    const loginButtonValue = (accountToken.length) > 0 ? 1 : 0;
    this._setAnimation(this._getFooterAnimation(footerPosition), this._getLoginButtonAnimation(loginButtonValue));
  }

  _setAnimation = (footerAnimation: Animated.CompositeAnimation, loginButtonAnimation: Animated.CompositeAnimation) => {
    let compositeAnimation = Animated.parallel([ footerAnimation, loginButtonAnimation]);
    this.setState({animation: compositeAnimation}, () => {
      compositeAnimation.start(() => this.setState({
        animation: null
      }));
    });
  }

  _onLogin = () => {
    const accountToken = this.props.account.accountToken;
    if(accountToken && accountToken.length > 0) {
      this.props.onLogin(accountToken);
    }
  }

  _onInputChange = (value: string) => {
    // notify delegate on first change after login failure
    if(this.state.notifyOnFirstChangeAfterFailure) {
      this.setState({ notifyOnFirstChangeAfterFailure: false });
      this.props.onFirstChangeAfterFailure();
    }
    this.props.onAccountTokenChange(value);
  }

  _formTitle() {
    switch(this.props.account.status) {
    case 'logging in':
      return 'Logging in...';
    case 'failed':
      return 'Login failed';
    case 'ok':
      return 'Login successful';
    default:
      return 'Login';
    }
  }

  _formSubtitle() {
    const { status, error } = this.props.account;
    switch(status) {
    case 'failed':
      return (error && error.message) || 'Unknown error';
    case 'logging in':
      return 'Checking account number';
    default:
      return 'Enter your account number';
    }
  }

  _getStatusIcon() {
    const statusIconPath = this._getStatusIconPath();
    return <View style={ styles.status_icon}>
      { statusIconPath ?
        <Img source={ statusIconPath } height={48} width={48} alt="" /> :
        null }
    </View>;
  }

  _getStatusIconPath(): ?string {
    switch(this.props.account.status) {
    case 'logging in':
      return 'icon-spinner';
    case 'failed':
      return 'icon-fail';
    case 'ok':
      return 'icon-success';
    default:
      return undefined;
    }
  }

  _accountInputGroupStyles(): Array<Object> {
    const classes = [styles.account_input_group];
    if(this.state.isActive) {
      classes.push(styles.account_input_group__active);
    }

    switch(this.props.account.status) {
    case 'logging in':
      classes.push(styles.account_input_group__inactive);
      break;
    case 'failed':
      classes.push(styles.account_input_group__error);
      break;
    }

    return classes;
  }

  _accountInputButtonStyles(): Array<Object> {
    const { status } = this.props.account;
    const classes = [styles.input_button];

    if(status === 'logging in') {
      classes.push(styles.input_button__invisible);
    }

    classes.push(this.state.loginButtonAnimationStyle);

    return classes;
  }

  _accountInputArrowStyles(): Array<Object> {
    const { accountToken, status } = this.props.account;
    const classes = [styles.input_arrow];

    if(accountToken && accountToken.length > 0) {
      classes.push(styles.input_arrow__active);
    }

    if(status === 'logging in') {
      classes.push(styles.input_arrow__invisible);
    }

    return classes;
  }

  _shouldEnableAccountInput(props: LoginPropTypes) {
    // enable account input always except when "logging in"
    return props.account.status !== 'logging in';
  }

  _shouldShowAccountHistory(props: LoginPropTypes) {
    return this._shouldEnableAccountInput(props) &&
      this.state.isActive &&
      props.account.accountHistory.length > 0;
  }

  _shouldShowLoginForm() {
    return this.props.account.status !== 'ok';
  }

  _shouldShowFooter(props: LoginPropTypes) {
    const { status } = props.account;
    return (status === 'none' || status === 'failed') && !this._shouldShowAccountHistory(props);
  }

  _getFooterAnimation(toValue: number){
    return Animated.timing(this.state.animatedFooterValue, {
      toValue: toValue,
      easing: Animated.Easing.InOut(),
      duration: 250,
      useNativeDriver: false,
    });
  }

  _onFooterLayout = (layout) => {
    this.setState({footerHeight: layout.height});
  }

  _getLoginButtonAnimation(toValue: number){
    return Animated.timing(this.state.animatedLoginButtonValue, {
      toValue: toValue,
      easing: Animated.Easing.Linear(),
      duration: 250,
      useNativeDriver: false,
    });
  }

  _onSelectAccountFromHistory = (accountToken) => {
    this.props.onAccountTokenChange(accountToken);
    this.props.onLogin(accountToken);
  }

  _createLoginForm() {
    const { accountHistory, accountToken } = this.props.account;

    // auto-focus on account input when failed to log in
    // do not refactor this into instance method,
    // it has to be new function each time to be called on each render
    const autoFocusOnFailure = (input) => {
      if(this.props.account.status === 'failed' && input) {
        input.focus();
      }
    };

    return <View>
      <Text style={ styles.subtitle }>{ this._formSubtitle() }</Text>
      <View style={ this._accountInputGroupStyles() }>
        <View style={ styles.account_input_backdrop}>
          <AccountInput style={styles.account_input_textfield}
            type="text"
            placeholder="0000 0000 0000 0000"
            placeholderTextColor={colors.blue40}
            onFocus={ this._onFocus }
            onBlur={ this._onBlur }
            onChange={ this._onInputChange }
            onEnter={ this._onLogin }
            value={ accountToken || '' }
            disabled={ !this._shouldEnableAccountInput(this.props) }
            autoFocus={ true }
            ref={ autoFocusOnFailure }
            testName='AccountInput'/>
          <Animated.View style={this._accountInputButtonStyles()} onPress={ this._onLogin } testName='account-input-button'>
            <Img style={this._accountInputArrowStyles()} source='icon-arrow' height={16} width={24} tintColor='currentColor' />
          </Animated.View>
        </View>
        <Accordion height={ this._shouldShowAccountHistory(this.props) ? 'auto' : 0 }>
          { <AccountDropdown
            items={ accountHistory.slice().reverse() }
            onSelect={ this._onSelectAccountFromHistory }
            onRemove={ this.props.onRemoveAccountTokenFromHistory } /> }
        </Accordion>
      </View>
    </View>;
  }

  _createFooter() {
    return <View>
      <Text style={ styles.login_footer__prompt}>{ 'Don\'t have an account number?' }</Text>
      <BlueButton onPress={ this._onCreateAccount }>
        <Label>Create account</Label>
        <Img source='icon-extLink' height={16} width={16} />
      </BlueButton>
    </View>;
  }
}

type AccountDropdownProps = {
  items: Array<AccountToken>,
  onSelect: (value: AccountToken) => void,
  onRemove: (value: AccountToken) => void,
};

class AccountDropdown extends React.Component<AccountDropdownProps> {
  render() {
    const uniqueItems = [...new Set(this.props.items)];
    return (
      <View>
        { uniqueItems.map(token => (
          <AccountDropdownItem key={ token }
            value={ token }
            label={ formatAccount(token) }
            onSelect={ this.props.onSelect }
            onRemove={ this.props.onRemove } />
        )) }
      </View>
    );
  }
}

type AccountDropdownItemProps = {
  label: string,
  value: AccountToken,
  onRemove: (value: AccountToken) => void,
  onSelect: (value: AccountToken) => void,
};

class AccountDropdownItem extends React.Component<AccountDropdownItemProps> {
  render() {
    return (<View>
      <View style={ styles.account_dropdown__spacer }/>
      <CellButton style={ styles.account_dropdown__item } cellHoverStyle={ styles.account_dropdown__item_hover }>
        <Label style={styles.account_dropdown__label} cellHoverStyle={ styles.account_dropdown__label_hover } onPress={ () => this.props.onSelect(this.props.value) }>
          { this.props.label }
        </Label>
        <Img style={styles.account_dropdown__remove}
          cellHoverStyle={ styles.account_dropdown__remove_cell_hover }
          hoverStyle={ styles.account_dropdown__remove_hover }
          source='icon-close-sml'
          height={16} width={16}
          onPress={ () => this.props.onRemove(this.props.value) }/>
      </CellButton>
    </View>);
  }
}