Untitled

'use client';

import { useEffect, useRef, useState } from 'react';

const useQRCodeStyling = (options, frameImage) => {
    //Only do this on the client
    if (typeof window !== 'undefined') {
        const QRCodeStylingLib = require('qr-code-styling');
        const qrCodeStyling = new QRCodeStylingLib(options);
        if (frameImage) {
            qrCodeStyling.append(new Image(frameImage));
        }

        console.log(qrCodeStyling);
        return qrCodeStyling;
    }
    return null;
};

export default function WebQrDesignPreview({ qr_id, values }) {
    const [url, setUrl] = useState(`${process.env.NEXT_PUBLIC_FRONTEND_URL}/w/${qr_id}`);
    const [fileExt, setFileExt] = useState('png');

    const frameImage = '/public/frame.png';

    const qrCode = useQRCodeStyling(values, frameImage);
    const ref = useRef(null);

    useEffect(() => {
        qrCode?.append(ref.current);
    }, [ref, qrCode]);

    useEffect(() => {
        qrCode?.update({ data: url });
    }, [url, qrCode]);

    const onExtensionChange = event => {
        setFileExt(event.target.value);
    };

    const onDownloadClick = () => {
        qrCode?.download({
            extension: fileExt,
            name: `qr_with_frame.${fileExt}`,
            size: 300 // Set the desired size of the saved image
        });
    };

    return (
        <div className='right-10 m-3 hidden lg:fixed lg:block'>
            <h1 className='text-medium text-lg font-medium'>Website</h1>
            <div className='my-5 flex h-[300px] w-[300px] items-center justify-center rounded border-2 border-gray-300'>
                {/* QR Code preview */}
                <div ref={ref} />
            </div>
            <div className='mt-5 flex w-[300px] items-center justify-between'>
                <select className='rounded border border-gray-300 px-4 py-1 font-medium' onChange={onExtensionChange} value={fileExt}>
                    <option value='png'>PNG</option>
                    <option value='jpeg'>JPEG</option>
                    <option value='webp'>WEBP</option>
                </select>
                <button className='btn btn-primary btn-sm rounded' onClick={onDownloadClick}>
                    Download
                </button>
            </div>

            <div className='mt-3 rounded-md bg-gray-200 px-2 py-4'>
                <h4 className='text-center text-xs'>
                    <span className='mr-2 text-orange-400'>! IMPORTANT:</span>
                    Don&apos;t forget to test your QR code
                </h4>
            </div>
        </div>
    );
}