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

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

type MailboxListProps = {
	account: IAccount | null;
	client: Client | null;
	onMailboxSelect: (mailboxId: string) => void;
};

type MailboxListState = {};

class MailboxList extends React.Component<MailboxListProps, MailboxListState> {
	componentDidUpdate() {
		if (this.props.account == null) return;
		if (this.props.client == null) return;
		this.props.client.mailboxList(this.props.account.id, []);
	}

	onMailboxClick(id: string) {
		this.props.onMailboxSelect(id);
	}

	render() {
		return this.props.account == null ||
			this.props.account.mailboxes == null ? (
			<Stack />
		) : (
			<Stack>
				{this.props.account.mailboxes.map((m) => (
					<Button
						className="p-2"
						key={m.id}
						onClick={() => {
							this.onMailboxClick(m.id);
						}}
					>
						{m.name}
					</Button>
				))}
			</Stack>
		);
	}
}
export default MailboxList;