import React, { Component } from 'react';
import { Animated, ScrollView, Text, View } from 'react-native';
import { Card, CheckBox, Divider, Icon } from 'react-native-elements';
import { FormLabel, Spacer } from '../../common';
import { PROFILE_FORM } from '../../FormTypes';
import BizCardView from '../../../components/BizCard/BizCardView';
import styles from './styles';
import { Keyword } from './../../common/Keyword';
import { strings } from '../../../locales/i18n';

export default class ProfileViewForm extends Component {
  constructor(props) {
    super(props);

    this.renderKeywords = this.renderKeywords.bind(this);
  }

  renderAboutSection() {
    const defaultProfile = this.props.defaultProfile;
    return (
      <Card>
        <FormLabel bold labelText={strings('common.contactFields.about_labelText')} />
        <FormLabel labelText={defaultProfile.about} />

        <FormLabel bold labelText={strings('common.contactFields.howIHelp_labelText_profile')} />
        <FormLabel labelText={defaultProfile.howIHelp} />

        <FormLabel bold labelText={strings('common.contactFields.whatINeed_labelText_profile')} />
        <FormLabel labelText={defaultProfile.whatINeed} />
      </Card>
    );
  }

  renderDetailsSection() {
    const defaultProfile = this.props.defaultProfile;
    return (
      <View style={{ flex: 1, flexDirection: 'column', alignItems: 'center', marginLeft: -10 }}>
        <FormLabel bold labelText={`@${defaultProfile.tagferId}`} textStyle={{ color: styles.colors.darkGreen, fontSize: 18 }} />
        <FormLabel bold labelText={defaultProfile.fullName} textStyle={{ fontSize: 22, marginHorizontal: 20, color: styles.colors.darkGrey }} />
        <FormLabel bold labelText={defaultProfile.headline} textStyle={{ fontSize: 15, marginHorizontal: 20, color: styles.colors.labelBlue }} />
        <FormLabel bold labelText={defaultProfile.titleAndCompany} textStyle={{ fontSize: 15, marginHorizontal: 20 }} />
        <FormLabel bold labelText={defaultProfile.location} textStyle={{ fontSize: 15, marginHorizontal: 20, color: styles.colors.middleGrey }} />
      </View>
    );
  }

  renderExperienceSection() {
    const defaultProfile = this.props.defaultProfile;
    // NORMAL - VIEW MODE
    let isAddedExperienceEmpty = true;
    console.log(`addedExperience: ${defaultProfile.addedExperience}`);
    for (let i = 0; i < defaultProfile.addedExperience.length; i++) {
      if (!isAddedExperienceEmpty) {
        break;
      }
      // for (const property in defaultProfile.addedExperience[i]) {
      //   if (defaultProfile.addedExperience[i][property].length > 0) {
      //     isAddedExperienceEmpty = false;
      //     break;
      //   }
      // }
    }

    if (!isAddedExperienceEmpty) {
      const experienceList = defaultProfile.addedExperience.map((data, index) => {
        if (index > 0) {
          return (
            <View key={index}>
              <Divider style={styles.dividerStyle} />
              <FormLabel labelText={data.jobTitle} />
              <FormLabel labelText={data.jobCompany} />
              <FormLabel labelText={data.jobDates} />
              <FormLabel labelText={data.jobLocation} />
              <FormLabel labelText={data.jobSummary} />
            </View>
          );
        }
        return (
          <View key={index}>
            <FormLabel labelText={data.jobTitle} />
            <FormLabel labelText={data.jobCompany} />
            <FormLabel labelText={data.jobDates} />
            <FormLabel labelText={data.jobLocation} />
            <FormLabel labelText={data.jobSummary} />
          </View>
        );
      });

      return (
        <Card>
          <FormLabel bold labelText={strings('common.contactFields.experience_labelText')} />
          {experienceList}
        </Card>
      );
    }
  }

  renderEducationSection() {
    const defaultProfile = this.props.defaultProfile;
    let isAddedEducationEmpty = true;
    console.log(`addedEducation: ${defaultProfile.addedEducation}`);
    for (let i = 0; i < defaultProfile.addedEducation.length; i++) {
      if (!isAddedEducationEmpty) {
        break;
      }
      // for (const property in defaultProfile.addedEducation[i]) {
      //   if (defaultProfile.addedEducation[i][property].length > 0) {
      //     isAddedEducationEmpty = false;
      //     break;
      //   }
      // }
    }

    if (!isAddedEducationEmpty) {
      const educationList = defaultProfile.addedEducation.map((data, index) => {
        if (index > 0) {
          return (
            <View key={index}>
              <Divider style={styles.dividerStyle} />
              <FormLabel labelText={data.school} />
              <FormLabel labelText={data.degree} />
              <FormLabel labelText={data.fieldOfStudy} />
              <FormLabel labelText={data.schoolDates} />
              <FormLabel labelText={data.educationSummary} />
            </View>
          );
        }
        return (
          <View key={index}>
            <FormLabel labelText={data.school} />
            <FormLabel labelText={data.degree} />
            <FormLabel labelText={data.fieldOfStudy} />
            <FormLabel labelText={data.schoolDates} />
            <FormLabel labelText={data.educationSummary} />
          </View>
        );
      });

      return (
        <Card>
          <FormLabel bold labelText={strings('common.contactFields.education_labelText')} />
          {educationList}
        </Card>
      );
    }
  }

  renderKeywordsSection() {
    const defaultProfile = this.props.defaultProfile;
    if (defaultProfile.keywords.length > 0) {
      return (
        <Card>
          <View style={styles.keywordViewStyle}>
            {this.renderKeywords()}
          </View>
        </Card>
      );
    }
  }

  renderPhoneSection(phone, phoneLabel) {
    if (!phone) {
      return;
    }

    return (
      <Card>
        <FormLabel bold labelText={phoneLabel} />
        <FormLabel labelText={phone} />
      </Card>
    );
  }

  renderWorkPhoneSection() {
    const { workPhone, extension } = this.props.defaultProfile;
    console.log(`Work Phone: ${workPhone}`);
    console.log(`Extension: ${extension}`);
    if (!workPhone && !extension) {
      return;
    }

    return (
      <Card>
        <FormLabel bold labelText={strings('common.contactFields.phone_work_labelText')} />
        <FormLabel labelText={workPhone} />

        <FormLabel bold labelText={strings('common.contactFields.extension_labelText')} />
        <FormLabel labelText={extension} />
      </Card>
    );
  }

  /**
  * Renders each keyword onto the screen
  **/
 renderKeywords() {
   const keywords = this.props.defaultProfile.keywords;
    return keywords.map((data, index) =>
      (
        <Keyword
          key={index}
          title={data}
          onPressX={() => this.removeKeyword(index)}
          displayX={this.props.isEditMode}
          index={index}
        />
      ));
  }

  renderAvatarBizCardSlider() {
    return (
      <View style={styles.detailsSectionStyle}>
        <ScrollView
          horizontal
          pagingEnabled
          showsHorizontalScrollIndicator={false}
          onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { x: this.props.scrollX } } }]
          )}
          scrollEventThrottle={16}
        >
          <View style={styles.slideStyle}>
            {/* <ProfileAvatar
              {...this.props}
              formType={PROFILE_FORM}
              isEditMode={this.props.profileFormMode}
            /> */}
            {this.renderDetailsSection()}
          </View>

          <View style={styles.slideStyle}>
            <BizCardView
              formType={PROFILE_FORM}
              formMode={this.props.formMode}
            />
          </View>
        </ScrollView>

        {/* <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center' }}>
          {this.props.DOTS_SIZE.map((_, i) => {
            const opacity = this.props.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> */}
      </View>
    );
  }

  renderEmailSection() {
    const { email } = this.props.defaultProfile;
    if (!email) {
      return;
    }

    return (
      <Card>
        <FormLabel bold labelText={strings('common.contactFields.email_labelText')} />
        <FormLabel labelText={email} />
      </Card>
    );
  }

  renderWebsiteSection() {
    const { website } = this.props.defaultProfile;
    if (!website) {
      return;
    }

    return (
      <Card>
        <FormLabel bold labelText={strings('common.contactFields.website_labelText')} />
        <FormLabel labelText={website} />
      </Card>
    );
  }

  renderAddressSection() {
    const { street, address2, city, region, postalCode, country } = this.props.defaultProfile;
    if (!street && !address2 && !city && !region && !postalCode && !country) {
      return;
    }

    return (
      <Card>
        <FormLabel bold labelText={strings('common.contactFields.address_labelText')} />
        <FormLabel labelText={street} />
        <FormLabel labelText={address2} />
        <FormLabel labelText={city} />
        <FormLabel labelText={region} />
        <FormLabel labelText={postalCode} />
        <FormLabel labelText={country} />
      </Card>
    );
  }

  render() {
    return (
      <View>
        {this.renderAvatarBizCardSlider()}
        {this.renderAboutSection()}
        {this.renderExperienceSection()}

        {this.renderEducationSection()}

        {this.renderWebsiteSection()}
        {this.renderAddressSection()}
        {this.renderPhoneSection(this.props.defaultProfile.primaryPhone, strings('common.contactFields.phone_primary_labelText'))}
        {this.renderPhoneSection(this.props.defaultProfile.secondaryPhone, strings('common.contactFields.phone_secondary_labelText'))}
        {this.renderWorkPhoneSection()}
        {this.renderPhoneSection(this.props.defaultProfile.fax, strings('common.contactFields.fax_labelText'))}

        {this.renderEmailSection()}
        {this.renderKeywordsSection()}
        <Spacer />
      </View>
    );
  }
}
