import React, { Component } from 'react';

import { EditableList } from 'lib/components';

import CustomerContactForm from 'components/CustomerContactForm';

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

import Toast from 'components/Toast';


class CustomerContactList extends EditableList {


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


	renderItemForm(item, key, disabled) {
		return (
			<CustomerContactForm 
				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) {
		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">{ item.phone } | { item.email }</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>
		);
	}


}


export default injectIntl(CustomerContactList);