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>
);
}