import React, { useState } from 'react';
import { Button, Sidecar, useToast } from '@theorchard/suite-components';
import useCatalogExport from 'src/data/catalogExport';
import AccountSearchDropdown from '../accountSearchDropdown';
import type { Account } from 'src/data/types';
import './index.scss';

const SpreadsheetSidecar = ({
    open,
    onClose,
}: {
    open: boolean;
    onClose: () => void;
}) => {
    const [account, setAccount] = useState<Account | undefined>(undefined);
    const toast = useToast();
    const { requestExport, loading } = useCatalogExport();
    return (
        <Sidecar.Custom
            className="sidecar"
            data-testid="sidecar"
            isOpen={open}
            onRequestClose={onClose}
            title="Catalog Metadata Spreadsheets"
            customFooter={
                <div className="buttons">
                    <Button
                        disabled={!account}
                        loading={loading}
                        onClick={async () => {
                            if (account) {
                                await requestExport({
                                    vendorId: account.id,
                                    onComplete: url => {
                                        onClose();
                                        // Create a temporary anchor element to trigger download
                                        const link =
                                            document.createElement('a');
                                        link.href = url;
                                        link.download = ''; // Let the server's content-disposition header determine filename
                                        document.body.appendChild(link);
                                        link.click();
                                        document.body.removeChild(link);
                                        toast(
                                            `Downloaded spreadsheet for ${account?.name}`
                                        );
                                    },
                                });
                            }
                        }}
                    >
                        Export
                    </Button>
                </div>
            }
        >
            <p>
                Select account from the drop down, and then press the
                &quot;Export&quot; button below to export the catalog into a
                bulk metadata spreadsheet.
            </p>
            <AccountSearchDropdown
                placeholder="Select Account"
                selectedAccount={account}
                onChange={account => setAccount(account)}
            />
        </Sidecar.Custom>
    );
};

export default SpreadsheetSidecar;