import React from 'react';
import Delete from 'material-ui/svg-icons/action/delete';
import Create from 'material-ui/svg-icons/content/create';
import Call from 'material-ui/svg-icons/communication/call';
import TextSms from 'material-ui/svg-icons/communication/textsms';
import Mail from 'material-ui/svg-icons/content/mail';
import IconButton from 'material-ui/IconButton';
import PropTypes from 'prop-types';

const ContactOption = (props) => {
  const buttonStyle = {
    marginTop: -10
  };

  const divStyle = {
    inlineSize: "max-content"
  };

  const handleRemoveContact = (c) => {
    if (props.onContactDeleted) {
      props.onContactDeleted(c);
    } else {
      console.log('onContactDelete is undefined');
      console.log(c);
    }
  };

  const handleUpdateContact = (c) => {
    if (props.onContactUpdated) {
      props.onContactUpdated(c);
    } else {
      console.log('onContactUpdate is undefined');
      console.log(c);
    }
  };

  const handleCustomAction = (c) => {
    console.log('This is a custom action: ', c);

    if (props.onCustomAction) {
      props.onCustomAction(c);
    } else {
      console.log('onCustomAction is undefined');
      console.log(c);
    }
  }

  let deleteButton = null
  if (props.showDelete) {
    deleteButton = (<IconButton onTouchTap={(e) => handleRemoveContact(props.contact)} style={buttonStyle}><Delete /></IconButton>);
  }

  let updateButton = null;
  if (props.showEdit) {
    updateButton = (<IconButton onTouchTap={(e) => handleUpdateContact(props.contact)} style={buttonStyle}><Create /></IconButton>);
  }

  const actionButton = [];
  if (props.showAction && props.contact.type.key) {
    switch (props.contact.type.key) {
      case "phone":
      case "landline":
        actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Call /></IconButton>);
        break;
      case "mobile":
      case "sms":
        actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><TextSms /></IconButton>);
        actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Call /></IconButton>);
        break;
      case "email":
        actionButton.push(<IconButton onTouchTap={(e) => handleCustomAction(props.contact)} style={buttonStyle}><Mail /></IconButton>);
        break;
    }
  }

  return (
    <div style={divStyle}>
      {deleteButton}
      {updateButton}
      {actionButton}
    </div>
  );
};

ContactOption.propTypes = {
  contact: PropTypes.object.isRequired,
  showEdit: PropTypes.bool,
  showDelete: PropTypes.bool,
  showAction: PropTypes.bool,
  showName: PropTypes.bool,
  showDescription: PropTypes.bool,
  onContactDeleted: PropTypes.func,
  onContactUpdated: PropTypes.func,
  onCustomAction: PropTypes.func,
};

ContactOption.defaultProps = {
  showEdit: true,
  showDelete: true,
  showName: true,
  showDescription: true,
  showAction: true,
};

module.exports = ContactOption;
