import React from 'react';
import PropTypes from 'prop-types';

import styles from './styles.scss';

export default function ContactDetails({
  currentLocale,
  contactItem,
  getAvatarUrl,
  getPresence,
  onClickToSMS,
  onClickToDial,
  onClickToGmail,
}) {
  return (
    <div className={styles.root}>
      <p>Contact Id: {contactItem.id}</p>
      <p>Contact Name: {contactItem.name}</p>
    </div>
  );
}

ContactDetails.propTypes = {
  currentLocale: PropTypes.string.isRequired,
  contactItem: PropTypes.shape({
    id: PropTypes.string.isRequired,
  }).isRequired,
  getAvatarUrl: PropTypes.func.isRequired,
  getPresence: PropTypes.func.isRequired,
  onClickToSMS: PropTypes.func,
  onClickToDial: PropTypes.func,
  onClickToGmail: PropTypes.func,
};

ContactDetails.defaultProps = {
  onClickToSMS: undefined,
  onClickToDial: undefined,
  onClickToGmail: undefined,
};

@@ -312,18 +312,46 @@
  %3Cp%3E
-Contact Id
+Id: %7BcontactItem.id%7D%3C/p%3E%0A      %3Cp%3EType
 : %7Bc
@@ -353,34 +353,36 @@
 e: %7BcontactItem.
-id
+type
 %7D%3C/p%3E%0A      %3Cp%3EC
@@ -384,207 +384,666 @@
  %3Cp%3E
-Contact Name: %7BcontactItem.name%7D%3C/p%3E%0A    %3C/div%3E%0A  );%0A%7D%0A%0AContactDetails.propTypes = %7B%0A  currentLocale: PropTypes.string.isRequired,%0A  contactItem: PropTypes.shape(%7B%0A    id: PropTypes.string.isRequired
+Name: %7B%60$%7BcontactItem.firstName%7D $%7BcontactItem.lastName%7D%60%7D%3C/p%3E%0A      %7B%0A        contactItem.phoneNumbers.map(item =%3E (%0A          %3Cp%3E%7Bitem.phoneType%7D: %7Bitem.phoneNumber%7D%3C/p%3E%0A        ))%0A      %7D%0A    %3C/div%3E%0A  );%0A%7D%0A%0AContactDetails.propTypes = %7B%0A  currentLocale: PropTypes.string.isRequired,%0A  contactItem: PropTypes.shape(%7B%0A    id: PropTypes.string.isRequired,%0A    type: PropTypes.string.isRequired,%0A    firstName: PropTypes.string,%0A    lastName: PropTypes.string,%0A    email: PropTypes.string,%0A    hasProfileImage: PropTypes.bool,%0A    phoneNumbers: PropTypes.arrayOf(PropTypes.shape(%7B%0A      phoneNumber: PropTypes.string,%0A      phoneType: PropTypes.string,%0A    %7D))
 ,%0A  

update contact details