import { LightningElement, wire } from 'lwc';
import {
    reduceErrors
} from 'c/ldsUtils';
import getContactList from '@salesforce/apex/ContactController.getContactList';

export default class ContactList extends LightningElement {
    @wire(getContactList) contacts;

    handleSelect(event) {
        // 1. Prevent default behavior of anchor tag click which is to navigate to the href url
        event.preventDefault();
        // 2. Create a custom event that bubbles. Read about event best practices at http://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.events_best_practices
        const selectEvent = new CustomEvent('contactselect', {
            detail: { contactId: event.currentTarget.dataset.contactId }
        });
        // 3. Fire the custom event
        this.dispatchEvent(selectEvent);
    }
    get errors() {
        return (this.accounts.error) ?
            reduceErrors(this.accounts.error) : [];
    }
}

<template>
    <template if:true={contacts.data}>
        <template if:true={errors}>
            <p>{errors}</p>
        </template>
        <template for:each={contacts.data} for:item="contact">
            <a
                href="#"
                key={contact.Id}
                data-contact-id={contact.Id}
                onclick={handleSelect}
            >
                <lightning-layout>
                    <lightning-layout-item>
                        <img src={contact.Picture__c} alt="Profile photo" />
                    </lightning-layout-item>
                    <lightning-layout-item padding="horizontal-small">
                        <p>{contact.Name}</p>
                    </lightning-layout-item>
                </lightning-layout>
            </a>
        </template>
    </template>
</template>

public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContactList() {
        throw new AuraHandledException('Forced error');
        /*return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];*/
    }

    @AuraEnabled(cacheable=true)
    public static List<Contact> findContacts(String searchKey) {
        String key = '%' + searchKey + '%';
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WHERE Name LIKE :key AND Picture__c != null
            WITH SECURITY_ENFORCED
            LIMIT 10
        ];
    }

    @AuraEnabled(cacheable=true)
    public static Contact getSingleContact() {
        return [
            SELECT Id, Name, Title, Phone, Email, Picture__c
            FROM Contact
            WITH SECURITY_ENFORCED
            LIMIT 1
        ];
    }
}