Untitled

'use client';

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

const qrInfo = {
   width: 200,
   height: 200,
   margin: 0,
   qrOptions: { typeNumber: '0', mode: 'Byte', errorCorrectionLevel: 'M' },
   imageOptions: { hideBackgroundDots: true, imageSize: 1, margin: 2 },
   dotsOptions: { type: 'rounded', color: '#049041', gradient: null },
   backgroundOptions: { color: '#a39f9f', gradient: null },
   image: null,
   dotsOptionsHelper: {
      colorType: { single: true, gradient: false },
      gradient: {
         linear: true,
         radial: false,
         color1: '#6a1a4c',
         color2: '#6a1a4c',
         rotation: '0'
      }
   },
   cornersSquareOptions: {
      type: 'extra-rounded',
      color: '#000000',
      gradient: null
   },
   cornersSquareOptionsHelper: {
      colorType: { single: true, gradient: false },
      gradient: {
         linear: true,
         radial: false,
         color1: '#000000',
         color2: '#000000',
         rotation: '0'
      }
   },
   cornersDotOptions: { type: 'dot', color: '#000000', gradient: null },
   cornersDotOptionsHelper: {
      colorType: { single: true, gradient: false },
      gradient: {
         linear: true,
         radial: false,
         color1: '#000000',
         color2: '#000000',
         rotation: '0'
      }
   },
   backgroundOptionsHelper: {
      colorType: { single: true, gradient: false },
      gradient: {
         linear: true,
         radial: false,
         color1: '#ffffff',
         color2: '#ffffff',
         rotation: '0'
      }
   }
};

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 WebQrDesignPreview({ qr_id, values }) {
   const [url, setUrl] = useState(
      `${process.env.NEXT_PUBLIC_FRONTEND_URL}/w/${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 onUrlChange = event => {
      event.preventDefault();
      setUrl(event.target.value);
   };

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

   const onDownloadClick = () => {
      qrCode?.download({ extension: fileExt });
   };
   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'>
            <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>
   );
}