import React from 'react';
import moment from 'moment';
import { View, Text, Linking, Platform } from 'react-native';
import { Icon, Divider } from 'react-native-elements';
import EditButton from './EditButton';

const MainContent = ({ about, help, need, experienceList, educationList, contact, canEdit }) => {
  const contactsList = createContactsList(contact);

  return (
    <View style={{ height: '100%', backgroundColor: '#F5F8FA', alignItems: 'center', paddingVertical: 15 }}>
      {/* ABOUT SECTION */}
      {renderSingleSection('About', about, canEdit)}

      {/* HELP SECTION */}
      {renderSingleSection('How can you help your contacts?', help, canEdit)}

      {/* NEED SECTION */}
      {renderSingleSection('What do you need?', need, canEdit)}

      {/* EXPERIENCE SECTION */}
      {renderMultipleSections('Experience', experienceList, (e) => <ExperienceBody experience={e} />, canEdit)}

      {/* EDUCATION SECTION */}
      {renderMultipleSections('Education', educationList, (e) => <EducationBody education={e} />, canEdit)}

      {/* CONTACT SECTION */}
      {renderMultipleSections('Contact', contactsList, (c) => <ContactBody contact={c} />, canEdit)}
    </View>
  );
};

function renderSingleSection(title, body, canEdit) {
  if (body) {
    return (
      <Card title={title}>
        <Section addEdit={canEdit}>
          <Text>{body}</Text>
        </Section>
      </Card>
    );
  }
}

function renderMultipleSections(title, list, renderBody, canEdit) {
  const length = list.length;
  if (length === 0) { return null; }

  const sections = [];
  for (let i = 0; i < length; i++) {
    const addDivider = i !== length - 1;
    const section = (
      <Section key={i} addEdit={canEdit} addDivider={addDivider}>
        {renderBody(list[i])}
      </Section>
    );
    sections.push(section);
  }

  return (
    <Card title={title}>
      {sections}
    </Card>
  );
}

const ExperienceBody = ({ experience }) => {
  const { jobTitle, companyName, companyLocation, startDate, endDate, summary } = experience;

  return (
    <View>
      <Text>{jobTitle} at {companyName}</Text>
      <Text>{companyLocation}</Text>
      <Duration startDate={startDate} endDate={endDate} />
      <Text style={{ marginTop: 10 }}>{summary}</Text>
    </View>
  );
};

const EducationBody = ({ education }) => {
  const { school, degree, study, startDate, endDate, summary } = education;

  return (
    <View>
      <Text>{degree} at {school}</Text>
      <Text>{study}</Text>
      <Duration startDate={startDate} endDate={endDate} />
      <Text style={{ marginTop: 10 }}>{summary}</Text>
    </View>
  );
};

const ContactBody = ({ contact }) => {
  const { iconName, contactType, contactValue, linkTo } = contact;

  return (
    <View style={{ flexDirection: 'row' }}>
      <Icon name={iconName} />
      <View style={{ flexDirection: 'column', marginLeft: 15 }}>
        <Text style={{ fontSize: 15, marginBottom: 3 }}>{contactType}</Text>
        <Text style={{ color: '#0462AA' }} onPress={() => linkTo(contactValue)} >{contactValue}</Text>
      </View>
    </View>
  );
};

const Duration = ({ startDate, endDate }) => {
  if (!startDate && !endDate) { return null; }
  const start = moment(startDate).format('MMMM YYYY');
  const end = endDate === -1 ? 'Present' : moment(endDate).format('MMMM YYYY');

  return (
    <Text style={{ color: '#535353' }}>{start} - {end}</Text>
  );
};

const Card = ({ title, children }) => (
  <View style={styles.card}>
    <Text style={{ color: '#2B3550', fontSize: 17, fontWeight: '500' }}>{title}</Text>
    {children}
  </View>
);


const Section = ({ children, addDivider, addEdit }) => (
  <View>
    {addEdit ? <EditButton /> : <View style={{ marginTop: 10 }} />}
    {children}
    {addDivider ? <Divider style={{ marginVertical: 10 }} /> : null}
  </View>
);

function openEmail(email) {
  return Linking.canOpenURL(`mailto:${email}`).then(supported => {
    if (supported) {
      Linking.openURL(`mailto:${email}`);
    }
  });
}

function openPhone(phoneNumber) {
  return Linking.canOpenURL(`tel:${phoneNumber}`).then(supported => {
    if (supported) {
      Linking.openURL(`tel:${phoneNumber}`);
    }
  });
}

function createContactsList(contact = {}) {
  const phoneNumber = {
    iconName: 'phone',
    contactType: 'Phone Number',
    contactValue: contact.phoneNumber,
    linkTo: openPhone
  };
  const email = {
    iconName: 'email',
    contactType: 'Email',
    contactValue: contact.email,
    linkTo: openEmail
  };
  const contacts = [];
  if (contact.email) {
    contacts.push(email);
  }

  if (contact.phoneNumber) {
    contacts.push(phoneNumber);
  }

  return contacts;
}

const styles = {
  card: {
    width: '95%',
    padding: 10,
    margin: 5,
    borderWidth: 0.3,
    borderColor: '#e1e8ee',
    ...Platform.select({
      android: {
        elevation: 1,
      },
      default: {
        shadowColor: 'rgba(0,0,0, .2)',
        shadowOffset: { height: 0, width: 0 },
        shadowOpacity: 1,
        shadowRadius: 1,
      },
    }),
    backgroundColor: 'white'
  }
};

export default MainContent;
