Untitled

'use client';

import { useEffect, useRef, useState } from 'react';
import NoFrame from './NoFrame';
import SetFrame1 from './SetFrame1';
import SetFrame10 from './SetFrame10';
import SetFrame11 from './SetFrame11';
import SetFrame2 from './SetFrame2';
import SetFrame3 from './SetFrame3';
import SetFrame4 from './SetFrame4';
import SetFrame5 from './SetFrame5';
import SetFrame6 from './SetFrame6';
import SetFrame7 from './SetFrame7';
import SetFrame8 from './SetFrame8';
import SetFrame9 from './SetFrame9';

const useQRCodeStyling = options => {
    //Only do this on the client
    if (typeof window !== 'undefined') {
        const QRCodeStylingLib = require('qr-code-styling');
        const qrCodeStyling = new QRCodeStylingLib(options);
        return qrCodeStyling;
    }
    return null;
};
export default function QrDesignPreview({ qr_id, values, qrTypeData, setFieldValue, selectedTab }) {
    const url = `${process.env.NEXT_PUBLIC_FRONTEND_URL}/${qr_id}`;
    const [fileExt, setFileExt] = useState('png');

    const qrCode = useQRCodeStyling(values);
    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 = async () => {
        qrCode?.download({
            extension: fileExt,
            name: `qr_with_frame.${fileExt}`,
            size: 300
        });
    };

    const renderSelectedFrame = () => {
        switch (selectedTab) {
            case 0:
                return (
                    <NoFrame setFieldValue={setFieldValue}>
                        <div ref={ref} />
                    </NoFrame>
                );
            case 1:
                return (
                    <>
                        <SetFrame1 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame1>
                    </>
                );
            case 2:
                return (
                    <>
                        <SetFrame2 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame2>
                    </>
                );
            case 3:
                return (
                    <>
                        <SetFrame3 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame3>
                    </>
                );
            case 4:
                return (
                    <>
                        <SetFrame4 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame4>
                    </>
                );
            case 5:
                return (
                    <>
                        <SetFrame5 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame5>
                    </>
                );
            case 6:
                return (
                    <>
                        <SetFrame6 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame6>
                    </>
                );
            case 7:
                return (
                    <>
                        <SetFrame7 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame7>
                    </>
                );
            case 8:
                return (
                    <>
                        <SetFrame8 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame8>
                    </>
                );
            case 9:
                return (
                    <>
                        <SetFrame9 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame9>
                    </>
                );
            case 10:
                return (
                    <>
                        <SetFrame10 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame10>
                    </>
                );
            case 11:
                return (
                    <>
                        <SetFrame11 values={values} setFieldValue={setFieldValue}>
                            <div ref={ref} />
                        </SetFrame11>
                    </>
                );
            default:
                <>
                    <div ref={ref} />
                </>;
        }
    };

    return (
        <div className='right-10 top-20 mt-3 hidden lg:fixed lg:block'>
            <h1 className='text-medium text-center text-lg font-medium'>{qrTypeData?.qr_type}</h1>
            <div className='mt-3 rounded-md border border-gray-300 p-4'>
                {renderSelectedFrame()}

                <div className='mt-5 flex items-center justify-between'>
                    <select className='rounded border border-gray-300 px-4 py-1 font-medium' onChange={onExtensionChange} value={fileExt}>
                        <option value='svg'>SVG</option>
                        <option value='png'>PNG</option>
                        <option value='jpeg'>JPEG</option>
                        <option value='webp'>WEBP</option>
                    </select>
                    <button type='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>
        </div>
    );
}