Untitled

import useQrTypeDataContext from '@/contexts/QrTypeDataContext';
import { Form, Formik } from 'formik';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import WebQrDesignForm from './WebQrDesignForm';
import WebQrDesignPreview from './WebQrDesignPreview';

export default function WebQrDesignHome() {
   const [initialValues, setInitialValues] = useState({
      width: 200,
      height: 200,
      margin: 0,
      dotsOptions: {
         type: 'square',
         color: '#000000',
         gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
               { offset: 0, color: '#000000' },
               { offset: 1, color: '#000000' }
            ]
         }
      },
      backgroundOptions: {
         color: '#ffffff',
         gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
               { offset: 0, color: '#ffffff' },
               { offset: 1, color: '#ffffff' }
            ]
         }
      },
      cornersSquareOptions: {
         type: 'extra-rounded',
         color: '#000000',
         gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
               { offset: 0, color: '#000000' },
               { offset: 1, color: '#000000' }
            ]
         }
      },
      cornersDotOptions: {
         type: 'dot',
         color: '#000000',
         gradient: {
            type: 'linear',
            rotation: 0,
            colorStops: [
               { offset: 0, color: '#000000' },
               { offset: 1, color: '#000000' }
            ]
         }
      }
   });
   const [loading, setLoading] = useState(false);
   const { push } = useRouter();
   const { websiteData } = useQrTypeDataContext();

   const handleSubmit = async values => {
      console.log(values);
   };

   useEffect(() => {
      if (websiteData.qr_id) {
         setLoading(false);
      } else {
         // push("/qr-code-generator");
      }
   }, [push, websiteData.qr_id]);

   return loading ? (
      'Loading'
   ) : (
      <div>
         <Formik
            initialValues={initialValues}
            onSubmit={handleSubmit}
            enableReinitialize
         >
            {({ values, setFieldValue, handleChange }) => (
               <Form>
                  <div className='flex items-center justify-end'>
                     <button
                        type='submit'
                        className='btn btn-primary fixed right-10 rounded-full text-white'
                     >
                        Save Qr
                     </button>
                  </div>
                  <div className='grid grid-cols-3 gap-4'>
                     <WebQrDesignForm
                        values={values}
                        setFieldValue={setFieldValue}
                        setInitialValues={setInitialValues}
                        initialValues={initialValues}
                        handleChange={handleChange}
                     />
                     <WebQrDesignPreview
                        values={values}
                        qr_id={websiteData.qr_id}
                     />
                  </div>
               </Form>
            )}
         </Formik>
      </div>
   );
}