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

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

type EmailListProps = {
	account: IAccount | null;
	client: Client | null;
	mailbox: IMailbox | null;
};

type EmailListState = {};

class EmailList extends React.Component<EmailListProps, EmailListState> {
	componentDidUpdate() {
		if (this.props.account == null) return;
		if (this.props.client == null) return;
		if (this.props.mailbox == null) return;
		this.props.client.emailList(
			this.props.account.id,
			this.props.mailbox.id,
			[],
		);
	}

	render() {
		if (
			this.props.account == null ||
			this.props.mailbox == null ||
			this.props.mailbox.emailIds == null
		) {
			return <Stack />;
		} else if (this.props.mailbox.emails == null) {
			return (
				<Stack>
					{this.props.mailbox.emailIds.map((e) => (
						<div className="p-2" key={e}>
							Email {e}
						</div>
					))}
				</Stack>
			);
		} else {
			return (
				<Stack>
					{this.props.mailbox.emails.map((m) => (
						<div className="p-2" key={m.id}>
							{m.subject}
						</div>
					))}
				</Stack>
			);
		}
	}
}
export default EmailList;