import React from 'react';
import lbry from 'lbry';
import { ExpandableModal } from 'component/modal';

class ErrorModal extends React.Component {
	render() {
		const { modal, closeModal, error } = this.props;

		const errorObj = typeof error === 'string' ? { error: error } : error;

		const error_key_labels = {
			connectionString: __('API connection string'),
			method: __('Method'),
			params: __('Parameters'),
			code: __('Error code'),
			message: __('Error message'),
			data: __('Error data')
		};

		const errorInfoList = [];
		for (let key of Object.keys(error)) {
			let val = typeof error[key] == 'string'
				? error[key]
				: JSON.stringify(error[key]);
			let label = error_key_labels[key];
			errorInfoList.push(
				<li key={key}><strong>{label}</strong>: <code>{val}</code></li>
			);
		}
		const errorInfo = (
			<ul className="error-modal__error-list">{errorInfoList}</ul>
		);

		return (
			<ExpandableModal
				isOpen={modal == 'error'}
				contentLabel={__('Error')}
				className="error-modal"
				overlayClassName="error-modal-overlay"
				onConfirmed={closeModal}
				extraContent={errorInfo}
			>
				<h3 className="modal__header">{__('Error')}</h3>

				<div className="error-modal__content">
					<div>
						<img
							className="error-modal__warning-symbol"
							src={lbry.imagePath('warning.png')}
						/>
					</div>
					<p>
						{__(
							"We're sorry that LBRY has encountered an error. This has been reported and we will investigate the problem."
						)}
					</p>
				</div>
			</ExpandableModal>
		);
	}
}

export default ErrorModal;
