import React from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

import AccountList from "./AccountList";
import EmailList from "./EmailList";
import MailboxList from "./MailboxList";
import Client from "./client/Client";
import { AccountIdMap, IAccount, IMailbox } from "./client/types";

type TopProps = {
	account: IAccount | null;
	accounts: AccountIdMap;
	client: Client;
	mailbox: IMailbox | null;
	onMailboxSelect: (mailboxId: string) => void;
};

const AppLayout: React.FC<TopProps> = (props) => {
	return (
		<Container fluid>
			<Row>
				<Col>
					<AccountList account={props.account} accounts={props.accounts} />
				</Col>
				<Col></Col>
				<Col></Col>
			</Row>
			<Row>
				<Col lg="1">
					<MailboxList
						account={props.account}
						client={props.client}
						onMailboxSelect={props.onMailboxSelect}
					/>
				</Col>
				<Col lg="11">
					<EmailList
						account={props.account}
						client={props.client}
						mailbox={props.mailbox}
					/>
				</Col>
			</Row>
		</Container>
	);
};
export default AppLayout;