import React, { Fragment } from 'react';

import TextDisplay from './TextDisplay';

const contact = contactpoints => contactpoints.map((contactpoint) => {
  let toBeDisplayed = null;
  if (contactpoint.system === 'phone') {
    toBeDisplayed = <TextDisplay title="Phone number" value={contactpoint.value} />;
  }
  if (contactpoint.system === 'email') {
    toBeDisplayed = <TextDisplay title="Email" value={contactpoint.value} />;
  }
  return toBeDisplayed;
});

const NextOfKinInformation = ({
  nextOfKinInfo
}) => (
  <Fragment>
    <TextDisplay title="Name" value={nextOfKinInfo.name.firstname} />
    <TextDisplay title="Surname" value={nextOfKinInfo.name.lastname} />
    <TextDisplay title="Other names" value={nextOfKinInfo.name.middlename} />
    <TextDisplay title="relationship" value={nextOfKinInfo.relationship} />
    <TextDisplay title="language" value={nextOfKinInfo.language} />
    {contact(nextOfKinInfo.contactPoints)}
  </Fragment>
);

export default NextOfKinInformation;