import React from 'react';
import { ScrollView } from 'react-native';

import ProfileHeader from '../../components/profile/ProfileHeader';
import MainContent from '../../components/profile/MainContent';
import ActionBar from '../../components/profile/ActionBar';
import InfoBar from '../../components/profile/InfoBar';

import endpoints from '../../config/apiEndpoints';

import { fetchTagferApi } from '../../utils/fetch';
import { showFlashErrorMessage } from '../../utils/errorHandler';

export default class ProfileScreen extends React.Component {

  constructor(props) {
    super(props);
    // FIXME: Hardcoded data needs to be removed
    this.state = {
      profile: {
        fullName: 'Ruth Ougston',
        tagferId: 'ruthoug',
        experience: [{
          jobTitle: 'CTO',
          companyName: 'Square',
          companyLocation: 'California, USA',
          startDate: 1488904944000,
          endDate: -1,
          summary: 'Company name is a duis nec sapien convallis, tincidunt orci sed, ultrices augue. Quisque ornare non erat vitae eleifend. '
        },
        {
          jobTitle: 'Software Engineer',
          companyName: 'Google',
          companyLocation: 'California, USA',
          startDate: 1446914544000,
          endDate: 1399477344000,
          summary: 'Company name is a duis nec sapien convallis, tincidunt orci sed, ultrices augue. Quisque ornare non erat vitae eleifend. '
        }],
        education: [{
          degree: 'Bachelor\'s Degree',
          school: 'Harvard',
          study: 'Computer Engineering',
          startDate: 1283874144000,
          endDate: 1399477344000,
          summary: 'Harvard is a duis nec sapien convallis, tincidunt orci sed, ultrices augue. Quisque ornare non erat vitae eleifend. '
        }],
        contact: {
          email: 'ruthoug@google.com',
          phoneNumber: '+1 404 569-(9123)'
        }
      },
      numOfRecs: 12,
      numOfContacts: 500
    };

    this.setOptionsMenu = this.setOptionsMenu.bind(this);
    this.showOptionsMenu = this.showOptionsMenu.bind(this);
    this.tagferId = this.props.navigation.getParam('tagferId');
    this.profileN = 1;
    this.isSelf = !this.tagferId;
  }

  componentDidMount() {
    // this.onLoad1();
    // this.onLoad2();
  }

  async onLoad1() {
    const endpoint = this.isSelf ? endpoints.getProfileSelf(this.profileN) : endpoints.getProfile(this.tagferId);
    const response = await fetchTagferApi(endpoint);
    if (response.error) {
      return showFlashErrorMessage(response.error);
    }

    // FIXME: Make the backend aggregate the data in the same format as the state at the top, this requires a model change.
    // FIXME: Need to change the behaviour of how information is saved.
    const { profile } = response;
    
    this.setState({ profile });
  }

  async onLoad2() {
    const endpoint = this.isSelf ? endpoints.getConnectionCountSelf : endpoints.getConnectionCount(this.tagferId);
    const response = await fetchTagferApi(endpoint);
    if (response.error) {
      return showFlashErrorMessage(response.error);
    }

    this.setState({ numOfContacts: response.count });
  }

  getExperience(attribute) {
    if (this.state.profile.experience.length !== 0) {
      return this.state.profile.experience[0][attribute];
    }
  }

  setOptionsMenu(ref) {
    this.sortMenu = ref;
  }

  showOptionsMenu() {
    this.sortMenu.show();
  }

  render() {
    return (
      <ScrollView style={{ flex: 1 }}>
        <ProfileHeader
          fullName={this.state.profile.fullName}
          tagferId={this.state.profile.tagferId}
          photoURL={this.state.profile.photoURL}
          jobTitle={this.getExperience('jobTitle')}
          companyName={this.getExperience('companyName')}
          companyLocation={this.getExperience('companyLocation') || 'USA'}
          setOptionsMenu={this.setOptionsMenu}
          showOptionsMenu={this.showOptionsMenu}
          canEdit={this.isSelf}
        />

        <ActionBar isSelf={this.isSelf} />
        <InfoBar numOfRecs={this.state.numOfRecs} numOfContacts={this.state.numOfContacts} />
        <MainContent
          need={this.state.profile.need}
          help={this.state.profile.help}
          about={this.state.profile.about}
          experienceList={this.state.profile.experience}
          educationList={this.state.profile.education}
          contact={this.state.profile.contact}
          canEdit={this.isSelf}
        />
      </ScrollView>
    );
  }
}
