import React, { Component } from 'react';

import { EditableList } from 'lib/components';
import Toast from 'components/Toast';

import ContactForm from 'components/ContactForm';

import { injectIntl } from 'react-intl';
import messages from './messages.js';


class ContactList extends EditableList {


	renderFooter(disabled) {
		let intl = this.props.intl;
		return (
			<div className="center p10">
				<button type="button" className="btn" onClick={ () => this.showCreateForm(-1) } disabled={ disabled }>{ intl.formatMessage(messages.addButton) }</button>
			</div>
		);
	}


	renderItemForm(item, key, disabled) {
		return (
			<ContactForm 
				className="p10 editable-list-inline-form"
				data={ item } 
				key={ key } 				
				i18n={ this.props.i18n }
				onCancel={ () => this.hideForm() }
				onSubmit={ (data) => this.saveItem(data) }
				/>
		);
	}


	renderItem(item, key, disabled) {
		let secondary = [];
		if (item.phone) {
			secondary.push(item.phone);
		}
		if (item.email) {
			secondary.push(item.email);
		}
		if (item.skype) {
			secondary.push(item.skype);
		}

		return (
			<div className="list-row bottom-border" key={ key }>

				<div className="row-content row">
					<div className="left p10">
						<div className="main">{ item.name }</div>
						<div className="secondary">{ secondary.join(" | ") }</div>
					</div>
				</div>

				<div className="row-menu">
					<span className="icon" onClick={ () => this.showEditForm(key) }></span>
					<span className="icon" onClick={ () => this.deleteItem(key) }></span>
				</div>
			</div>
		);
	}



	/* I18N hooks/

	deleteTitle(data) {
		return this.props.deleteMessageLabel || "Delete row";
	}
	
	deleteMessage(data) {
		return this.props.deleteMessageLabel || "Are you sure you want to delete this row?";
	}

	discardTitle(data) {
		return this.props.discardTitleLabel || "Discard changes";
	}
	
	discardMessage(data) {
		return this.props.discardMessageLabel || "Are you sure you want to discard changes?";
	}

	/* other hooks */

	onItemSaved(data) {
		Toast.saved();
	}

	onItemDeleted(data) {
		Toast.deleted();
	}

}


export default injectIntl(ContactList);