import type { FC } from 'react';
import React, { useContext } from 'react';
import { Button, useToast } from '@theorchard/suite-components';
import { IdentityContext } from '@theorchard/suite-identity';

export const CopyButton: FC = () => {
    const addToast = useToast();
    const { identity } = useContext(IdentityContext);

    if (!identity) return null;

    const copyHeaders = () => {
        void navigator.clipboard.writeText(
            JSON.stringify(
                {
                    'orchard-identity-id': identity.id,
                    'orchard-profile-id': identity.profileId,
                    'orchard-profile-type': identity.profileType,
                    'apollographql-client-name': identity.name,
                },
                null,
                2
            )
        );
        addToast('Headers copied to your clipboard');
    };

    const copyIdentityId = () => {
        void navigator.clipboard.writeText(identity.id);
        addToast('"identity ID" copied to your clipboard');
    };

    return (
        <div style={{ display: 'flex', gap: 'var(--padding-large)' }}>
            <Button onClick={copyIdentityId}>Copy identity ID</Button>
            <Button onClick={copyHeaders}>Copy headers</Button>
        </div>
    );
};