import type { FC } from 'react';
import React, { useState, useCallback } from 'react';
import { Sidecar } from '@theorchard/suite-components';
import AccountSearchDropdown from 'src/components/accountSearchDropdown/accountSearchDropdown';
import CopyId from './components/copyId';
import type { Account } from 'src/data/types';

export const CLASSNAME = 'IdLookupSidecar';

export interface Props {
    open: boolean;
    closeSidecar: () => void;
}

const IdLookupSidecar: FC<Props> = ({ open, closeSidecar }) => {
    const [account, setAccount] = useState<Account>();

    const handleAccountChange = useCallback(
        (a?: Account) => {
            setAccount(a);
        },
        [setAccount]
    );

    return (
        <Sidecar
            className={CLASSNAME}
            isOpen={open}
            onRequestClose={closeSidecar}
            header={$t(`ownershipRights.idLookupSidecar.idLookup`)}
        >
            <div className={`${CLASSNAME}-body`}>
                <div
                    className={`${CLASSNAME}-account`}
                    data-testid={`${CLASSNAME}-account-lookup`}
                >
                    <div className={`${CLASSNAME}-account-header`}>
                        {$t(`ownershipRights.idLookupSidecar.account`)}
                    </div>
                    <AccountSearchDropdown
                        onChange={handleAccountChange}
                        placeholder={$t(
                            `ownershipRights.idLookupSidecar.enterAccountName`
                        )}
                        accountId={account?.id}
                    />
                    {account && (
                        <div className={`${CLASSNAME}-account-result`}>
                            <CopyId
                                className={`${CLASSNAME}-legal-name`}
                                data={account.name}
                                lookupType="Account"
                                title={$t(
                                    `ownershipRights.idLookupSidecar.account`
                                )}
                            />
                            <CopyId
                                data={String(account.id)}
                                lookupType="Account"
                                title={$t(
                                    `ownershipRights.idLookupSidecar.accountId`
                                )}
                            />
                        </div>
                    )}
                </div>
            </div>
        </Sidecar>
    );
};

export default IdLookupSidecar;