import * as React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faHome } from '@fortawesome/free-solid-svg-icons/faHome';
import { Colors } from '../../../../models/colors';
import { addressListStyle, addressItemStyle, homeIconStyle } from './addressList.style';
library.add(faHome);

export default class AddressList extends React.PureComponent<{
	palette: Colors;
	list: Array<{ record?: string; recordId?: string }>;
	selectedAddressFromList: { record?: string; recordId?: string };
	onAddressClick?: (address: { record?: string; recordId?: string }) => void;
}> {
	render() {
		const selectedAddressFromList =
			this.props.selectedAddressFromList && this.props.selectedAddressFromList.recordId
				? this.props.selectedAddressFromList
				: this.props.list[0];
		return (
			<ul className={addressListStyle()}>
				{this.props.list.map(item => {
					return (
						<li
							key={item.recordId}
							className={addressItemStyle(
								this.props.palette,
								item.recordId === selectedAddressFromList.recordId
							)}
							onClick={() => {
								this.props.onAddressClick(item);
							}}
						>
							<FontAwesomeIcon icon="home" className={homeIconStyle(this.props.palette)} />
							{item.record}
						</li>
					);
				})}
			</ul>
		);
	}
}