import React, { useContext } from "react";

import i18n from "assets/language/i18n";
import GenerateStatementsButton from "components/label-payee/generate-statement/GenerateStatementsButton";
import ConditionalRender from "components/shared/ConditionalRender";
import { DEALS_PERMISSIONS } from "constants/permissions";
import { useModal } from "contexts/Modal/ModalContext";
import { UserContext } from "contexts/User/UserContext";
import { Button } from "react-bootstrap";

const AccountActions: React.FC = React.memo((): JSX.Element => {
    const { permissions } = useContext(UserContext);
    const { updateActiveModal } = useModal();
    const canProcessStatements: boolean = permissions.includes(DEALS_PERMISSIONS.ACCESS_DEALS);

    return (
        <div className="account-actions">
            <Button
                className={"btn-account-action"}
                onClick={(): void => updateActiveModal && updateActiveModal("createPayee")}
            >
                <span>{i18n.t("payee.createNew")}</span>
            </Button>
            <ConditionalRender shouldRender={canProcessStatements}>
                <GenerateStatementsButton />
            </ConditionalRender>
        </div>
    );
});

export default AccountActions;