import { Encoder as QREncoder } from '@nuintun/qrcode';
import React, { VoidFunctionComponent } from 'react';
import Spinner from '../Spinner';

export interface ConnectCodesProps {
    qrCode?: QREncoder;
    userCode?: string;
    verificationURI?: string;
    verificationURIComplete?: string;
}
 
const ConnectCodes: VoidFunctionComponent<ConnectCodesProps> = ({ qrCode, userCode, verificationURI, verificationURIComplete }) => {
    // <purge>
    const pulse = userCode && verificationURI ? '' : 'animate-pulse';
    // </purge>

    const copyToClipboard = () => userCode && window.electron.copy(userCode.replace(/-/g, ''));

    const openInBrowser = () => verificationURI && window.electron.open(verificationURIComplete || verificationURI);

    return (
        <div className="mt-8 max-w-md lg:max-w-5xl mx-auto grid grid-cols-1 gap-16 px-6 lg:grid-flow-col-dense lg:grid-cols-2">
            <div className="lg:col-start-2 lg:col-span-1 text-lg">
                <div className="dark:text-gray-100">Scan de QR code of navigeer naar:</div>
                <div className={ `p-4 rounded-lg font-bold bg-gray-200 text-center text-xl cursor-pointer ${pulse}` } onClick={ openInBrowser }>
                    { verificationURI || <span>&nbsp;</span> }
                </div>
                <div className="mt-4 dark:text-gray-100">Voer onderstaande code in:</div>
                <div className={ `p-4 rounded-lg font-bold bg-gray-200 text-center text-xl cursor-pointer ${pulse}` } onClick={ copyToClipboard }>
                    { userCode || <span>&nbsp;</span> }
                </div>
            </div>
            <div className="space-y-6 lg:col-start-1 lg:col-span-1">
                <div className={ `bg-white shadow rounded-lg p-4 max-w-3xl ${pulse}` }>
                    {
                        qrCode ? (
                            <img src={ qrCode.toDataURL(8) } alt={ userCode } className="h-full w-full" />
                        ) : (
                            <div className="p-6 relative">
                                <div className="absolute -translate-x-1/2 -translate-y-1/2 left-1/2 m-auto top-1/2 transform">
                                    <Spinner size={ 64 } circleClassName="text-gray-200" />
                                </div>
                                <div className="border-dashed border-4 border-horizon-gray w-full" style={{ paddingTop: '100%' }} />
                            </div>
                        )
                    }
                </div>
            </div>
        </div>
    );
};
 
export default ConnectCodes;