/** Contains the base fields for a contact reuse **/
import React, { Component } from 'react';
import { Animated, Dimensions, Platform, ScrollView, View } from 'react-native';
import { Divider, FormInput } from 'react-native-elements';
import { connect } from 'react-redux';
import { contactFormReset, contactUpdate } from '../../actions';
import BizCard from '../BizCard';
import ProfileAvatar from '../ProfileAvatar';
import { FormMessage, FormLabel, Spacer } from '../common';
import { CONTACT_FORM } from '../FormTypes';
import colors from '../../config/colors.json';
import { strings } from '../../locales/i18n';

const SCREEN_WIDTH = Dimensions.get('window').width;
const DOTS_SIZE = ['first', 'second'];
const scrollX = new Animated.Value(0);

class ContactForm extends Component {
  /**
  * Component Will Unmount
  **/
  componentWillUnmount() {
    this.props.contactFormReset();
  }

  /**
  * Breaks the fullName into a first and last name for contact saving
  **/
  splitNameField(value) {
    this.props.contactUpdate({ prop: 'fullName', value });

    const nameArr = this.props.fullName.split(' ');
    const firstName = nameArr[0];
    this.props.contactUpdate({ prop: 'firstName', value: firstName });

    if (nameArr.length > 0) {
      const lastName = nameArr[1];
      this.props.contactUpdate({ prop: 'lastName', value: lastName });
    }
  }

  /**
  * Renders the avatar and biz card slider
  **/
  renderAvatarBizCardSlider() {
    const position = Animated.divide(scrollX, SCREEN_WIDTH);

    return (
      <View>
        <ScrollView
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: scrollX } } }]
          )}
          scrollEventThrottle={16}
        >
          <View style={styles.slideStyle}>
            <View style={{ flex: 1, justifyContent: 'center' }}>
              <ProfileAvatar
                {...this.props}
                formType={CONTACT_FORM}
                isEditMode
              />
            </View>
          </View>

          <View style={styles.slideStyle}>
            <BizCard
              formType={CONTACT_FORM}
              isEditMode
              isScanBizCardScreen={this.props.isScanBizCardScreen}
            />
          </View>
        </ScrollView>

        <View style={styles.dotsStyle}>
          {DOTS_SIZE.map((_, i) => {
            const opacity = position.interpolate({
              inputRange: [i - 1, i, i + 1],
              outputRange: [0.3, 1, 0.3],
              extrapolate: 'clamp'
            });

            return (
              <Animated.View
                key={i}
                style={{ opacity, height: 10, width: 10, backgroundColor: '#595959', margin: 8, borderRadius: 5 }}
              />
            );
          })}

        </View>
        {this.renderDetailsSection()}
      </View>
    );
  }

  /**
  * Renders the top section under the avatar
  **/
  renderDetailsSection() {
    return (
      <View>
        <Divider style={styles.dividerStyle} />

        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.fullName_labelText')} />
        <FormInput
          value={this.props.fullName}
          placeholder={strings('common.contactFields.fullName_placeholder')}
          onChangeText={value => this.splitNameField(value)}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.inputTextStyle}
        />

        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.headline_labelText')} />
        <FormInput
          value={this.props.headline}
          placeholder={strings('common.contactFields.headline_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'headline', value })}
          autoCorrect={false}
          autoCapitalize='none'
          multiline
          numberOfLines={4}
          inputStyle={styles.inputTextStyle}
        />

        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.titleAndCompany_labelText')} />
        <FormInput
          value={this.props.titleAndCompany}
          placeholder={strings('common.contactFields.titleAndCompany_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'titleAndCompany', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.inputTextStyle}
        />

        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.location_labelText')} />
        <FormInput
          value={this.props.location}
          placeholder={strings('common.contactFields.location_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'location', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.inputTextStyle}
        />
      </View>
    );
  }

  /**
  * Renders the primary phone section
  **/
  renderPrimaryPhoneSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.phone_primary_labelText')} />
        <FormInput
          value={this.props.primaryPhone}
          placeholder={strings('common.contactFields.phone_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'primaryPhone', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the secondary phone section
  **/
  renderSecondaryPhoneSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.phone_secondary_labelText')} />
        <FormInput
          value={this.props.secondaryPhone}
          placeholder={strings('common.contactFields.phone_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'secondaryPhone', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the work phone section
  **/
  renderWorkPhoneSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.phone_work_labelText')} />
        <FormInput
          value={this.props.workPhone}
          placeholder={strings('common.contactFields.phone_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'workPhone', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />

        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.extension_labelText')} />
        <FormInput
          value={this.props.extension}
          placeholder={strings('common.contactFields.extension_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'extension', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the fax phone section
  **/
  renderFaxSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.fax_labelText')} />
        <FormInput
          value={this.props.fax}
          placeholder={strings('common.contactFields.phone_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'fax', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the email section
  **/
  renderEmailSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.email_labelText')} />
        <FormInput
          value={this.props.contactEmail}
          placeholder={strings('common.contactFields.email_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'contactEmail', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the website section
  **/
  renderWebsiteSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.website_labelText')} />
        <FormInput
          value={this.props.website}
          placeholder={strings('common.contactFields.website_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'website', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Renders the address section
  **/
  renderAddressSection() {
    return (
      <View>
        <Spacer />
        <FormLabel bold labelText={strings('common.contactFields.address_labelText')} />
        <FormInput
          value={this.props.street}
          placeholder={strings('common.contactFields.address_placeholder_street')}
          onChangeText={value => this.props.contactUpdate({ prop: 'street', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
        <FormInput
          value={this.props.address2}
          placeholder={strings('common.contactFields.address_placeholder_address2')}
          onChangeText={value => this.props.contactUpdate({ prop: 'address2', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
        <FormInput
          value={this.props.city}
          placeholder={strings('common.contactFields.address_placeholder_city')}
          onChangeText={value => this.props.contactUpdate({ prop: 'city', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
        <FormInput
          value={this.props.region}
          placeholder={strings('common.contactFields.address_placeholder_region')}
          onChangeText={value => this.props.contactUpdate({ prop: 'region', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
        <FormInput
          value={this.props.postalCode}
          placeholder={strings('common.contactFields.address_placeholder_postalCode')}
          onChangeText={value => this.props.contactUpdate({ prop: 'postalCode', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
        <FormInput
          value={this.props.country}
          placeholder={strings('common.contactFields.address_placeholder_country')}
          onChangeText={value => this.props.contactUpdate({ prop: 'country', value })}
          autoCorrect={false}
          autoCapitalize='none'
          inputStyle={styles.formInputStyle}
        />
      </View>
    );
  }

  /**
  * Render method
  **/
  render() {
    return (
      <View>
        <View>
          {this.renderAvatarBizCardSlider()}
        </View>

        {this.renderPrimaryPhoneSection()}
        {this.renderSecondaryPhoneSection()}
        {this.renderWorkPhoneSection()}
        {this.renderFaxSection()}

        {this.renderEmailSection()}
        {this.renderWebsiteSection()}

        {this.renderAddressSection()}

        <Spacer />
        <FormLabel labelText={strings('common.contactFields.notes_labelText')} />
        <FormInput
          value={this.props.notes}
          placeholder={strings('common.contactFields.notes_placeholder')}
          onChangeText={value => this.props.contactUpdate({ prop: 'notes', value })}
          autoCorrect={false}
          autoCapitalize='none'
          multiline
          numberOfLines={4}
          containerStyle={{ minHeight: 200 }}
          inputStyle={styles.textBoxStyles}
        />
        <FormMessage error={this.props.error} />
      </View>
    );
  }
}

const styles = {
  slideStyle: {
    width: SCREEN_WIDTH,
  },
  dividerStyle: {
    backgroundColor: colors.middleGrey,
    marginTop: 10,
    marginBottom: 15
  },
  dotsStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center'
  },
  centeredInputContainerStyle: {
    borderBottomWidth: 0,
    marginLeft: 15,
    marginRight: 0
  },
  centeredInputTextStyle: {
    textAlign: 'center',
    color: colors.black
  },
  inputTextStyle: {
    width: '100%',
    color: colors.black
  },
  centeredTextBoxStyles: {
    textAlign: 'center',
    flex: 1,
    width: '100%',
    color: colors.black
  },
  nameTextStyle: {
    fontSize: 22,
    fontWeight: 'bold'
  },
  textBoxStyles: {
    flex: 1,
    width: '100%',
    borderBottomWidth: Platform.OS === 'android' ? 1 : 0,
    borderColor: colors.middleGrey,
    color: colors.black
  },
  formInputStyle: {
    color: colors.black
  }
};

/**
* If you add any items here be sure to update them in the ContactCreateScreen,
* ContactEditScreen, ContactImportScreen, ContactActions, and ContactFormReducer
**/
const mapStateToProps = (state) => {
  const {
    contactBizCardImg,
    contactAvatarImg,
    firstName,
    lastName,
    fullName,
    headline,
    location,
    titleAndCompany,
    primaryPhone,
    secondaryPhone,
    workPhone,
    extension,
    fax,
    contactEmail,
    website,
    street,
    address2,
    city,
    region,
    postalCode,
    country,
    notes,
    contactCreateDate,
    error
  } = state.contactForm;

  return {
    contactBizCardImg,
    contactAvatarImg,
    firstName,
    lastName,
    fullName,
    headline,
    location,
    titleAndCompany,
    primaryPhone,
    secondaryPhone,
    workPhone,
    extension,
    fax,
    contactEmail,
    website,
    street,
    address2,
    city,
    region,
    postalCode,
    country,
    notes,
    contactCreateDate,
    error
  };
};

export default connect(mapStateToProps, {
  contactFormReset, contactUpdate
})(ContactForm);
