import React from "react";
import Placeholder from "react-bootstrap/Placeholder";

import Client from "./client/Client";
import { IAccount, IEmailStub, IMailbox } from "./client/types";

type EmailSummaryProps = {
	account: IAccount | null;
	client: Client | null;
	emailId: string;
	emailStub: IEmailStub | null;
	mailbox: IMailbox | null;
};
type EmailSummaryState = {};

class EmailSummary extends React.Component<
	EmailSummaryProps,
	EmailSummaryState
> {
	componentDidMount() {
		this.ensureData();
	}
	componentDidUpdate() {
		this.ensureData();
	}

	ensureData() {
		if (this.props.account == null) return;
		if (this.props.client == null) return;
		this.props.client.ensureEmailStub(
			this.props.account.id,
			this.props.emailId,
		);
	}

	render() {
		if (this.props.account == null || this.props.mailbox == null) {
			return (
				<div className="p-2 border pe-auto" key={this.props.emailId}>
					<Placeholder animation="glow" />
				</div>
			);
		}
		const href =
			"#" +
			this.props.account.id +
			"/" +
			this.props.mailbox.id +
			"/" +
			this.props.emailId;
		return (
			<div className="p-2 border" key={this.props.emailId}>
				<a className="btn" href={href}>
					{this.props.emailStub != null
						? this.props.emailStub.subject
						: this.props.emailId}
				</a>
			</div>
		);
	}
}
export default EmailSummary;