import React from 'react';
import {
    FullscreenModal as Modal,
    Button,
    useFullscreenModal,
} from '@theorchard/suite-components';
import { useToast } from '@theorchard/suite-frontend';
import { useHistory } from 'react-router-dom';
import { useCreateAccount } from 'src/apollo/mutations';
import { ROUTE_ACCOUNT } from 'src/constants/route';
import {
    CANCEL_TERM,
    CREATE_ACCOUNT_TERM,
    INPUT_TERM,
    CREATION_FAILURE_TERM,
} from 'src/constants/staticFormatMessages';
import { CREATED_ACCOUNT_SESSION_KEY } from 'src/utils/account';
import { createHref } from 'src/utils/route';
import Form from './components/createAccountForm';
import type { CreateVendorInput } from 'src/apollo/definitions/globalTypes';
import type { AccountMetadata } from 'src/apollo/queries/account/selectors';

export const CLASSNAME = 'AccountModal';

const AccountModal = () => {
    const history = useHistory();
    const { close } = useFullscreenModal();
    const toast = useToast();

    const [addAccount] = useCreateAccount();

    const handleClose = () => {
        close(() => history.push('/accounts'));
    };

    const handleSubmit = async ({
        serviceTierName,
        ...formData
    }: CreateVendorInput & { serviceTierName?: string }) => {
        let vendor:
            | {
                  vendorId: number;
                  uuid: string;
                  name: string;
              }
            | undefined;

        try {
            const { data: mutationData } = await addAccount({
                variables: { accountInfo: formData },
            });
            vendor = mutationData?.createVendor;
        } catch (e) {
            toast(CREATION_FAILURE_TERM);
            console.error(e);
        } finally {
            if (vendor) {
                const baseAccount: AccountMetadata = {
                    vendorId: vendor.vendorId,
                    name: vendor.name,
                    uuid: vendor.uuid,
                    serviceTierName,
                    isDistributor: false,
                    defaultSalesSheetTemplateId: '',
                };

                window.sessionStorage.setItem(
                    CREATED_ACCOUNT_SESSION_KEY,
                    JSON.stringify(baseAccount)
                );

                history.push(
                    createHref(ROUTE_ACCOUNT, {
                        accountId: vendor.vendorId,
                        isInvited: 'true',
                    })
                );
            }
        }
    };

    return (
        <Modal className={CLASSNAME} data-testid={CLASSNAME}>
            <Modal.Header title={CREATE_ACCOUNT_TERM}>
                <Button onClick={handleClose}>{CANCEL_TERM}</Button>
            </Modal.Header>
            <Modal.Title title={INPUT_TERM} />
            <Modal.Body>
                <Form onSubmit={handleSubmit} />
            </Modal.Body>
        </Modal>
    );
};

export default AccountModal;