Untitled

import useQrTypeDataContext from '@/contexts/QrTypeDataContext';
import { qrCodeUrl } from '@/lib/api/getAxios';
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,
        image: null,
        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);

        const qrStyles = {
            qr_info: values
        };

        const { data } = await qrCodeUrl.put(`/api/v1/qr/website/${websiteData.qr_id}`, qrStyles);
        console.log(data);
    };

    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} handleChange={handleChange} />
                            <WebQrDesignPreview values={values} qr_id={websiteData.qr_id} />
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    );
}