Untitled

'use client';

import InputField from '@/app/admin/(private)/components/Formik/InputField';
import ImageDropSingle from '@/app/components/Global/ImageDropSingle';
import { useGetResourceQuery, useUpdateResourceMutation } from '@/features/resource/resourceApi';
import { Field, Form, Formik } from 'formik';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { RiCloseCircleFill } from 'react-icons/ri';
import { Button, Textarea } from 'rizzui';
import PageLoading from '../../components/PageLoading';

export default function Settings() {
  const [logo, setLogo] = useState(null);
  const [showImage, setShowImage] = useState(false);
  const { isLoading, isFetching, data } = useGetResourceQuery(null);
  const [updateResource] = useUpdateResourceMutation();

  const handleSubmit = (values: any) => {
    values.logo = logo;
    if (values?.id) delete values.id;
    let payload: any = {};
    if (values.logo instanceof Object) {
      payload.logo = values.logo;
      delete values.logo;
    }
    delete values.logo;
    payload.data = JSON.stringify(values);
    const fd = new FormData();
    Object.keys(payload).forEach((key) => fd.append(key, payload[key]));
    updateResource(fd)
      .then((res) => {
        toast.success('Resource Updated Successfully');
      })
      .catch((err) => {
        console.log(err);
        toast.error('Something Went Wrong');
      });
  };

  let initialValues = {
    ...data?.data,
  };

  useEffect(() => {
    if (!isLoading || !isFetching || data) {
      setLogo(data?.data?.logo);
      setShowImage(!!data?.data?.logo);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isLoading, data]);
  return (
    <section className="flex flex-col items-center">
      {isLoading ? (
        <PageLoading />
      ) : (
        <>
          <h1 className="my-10 text-center text-4xl font-bold leading-3 tracking-wider text-violet-800 underline underline-offset-[20px]">
            Site Settings
          </h1>
          <div className="my-10 w-[70%] rounded-lg border-2 border-violet-600 p-4">
            <Formik initialValues={initialValues} onSubmit={handleSubmit} enableReinitialize>
              {() => (
                <Form>
                  {showImage && data?.data?.logo && (
                    <div>
                      <p className="font-bold">Logo</p>
                      <div className="relative">
                        <img src={data?.data?.logo} alt="Image" className="mt-4 h-24 w-24 rounded-md border border-gray-200 object-contain p-1" />
                        <RiCloseCircleFill
                          className="absolute -top-[10px] left-[80px] cursor-pointer text-2xl text-red-600"
                          onClick={() => setShowImage(false)}
                        />
                      </div>
                    </div>
                  )}

                  {!showImage && <ImageDropSingle className="mt-3" value={logo} onChange={(image: any) => setLogo(image)} />}
                  {/* Need to place the logo updated component here */}
                  <InputField name="email" required={false} label="Email" placeholder="Email" />
                  <InputField name="phone" required={false} label="Phone" placeholder="Phone" />
                  <InputField name="whatsApp" required={false} label="WhatsApp" placeholder="WhatsApp" />
                  <InputField name="telegram" required={false} label="Telegram" placeholder="Telegram" />
                  <InputField name="address" required={false} label="Address" placeholder="Address" />
                  <Field name="copyRightText">
                    {({ field, meta }: { field: any; meta: any }) => (
                      <Textarea required {...field} name="copyRightText" label="Copy Right Text" placeholder="Copy Right Text" />
                    )}
                  </Field>
                  <Field name="privacyPolicy">
                    {({ field, meta }: { field: any; meta: any }) => (
                      <Textarea {...field} required name="privacyPolicy" label="Privacy Policy" placeholder="Privacy Policy" />
                    )}
                  </Field>
                  <Field name="termsConditions">
                    {({ field, meta }: { field: any; meta: any }) => (
                      <Textarea {...field} required name="termsConditions" label="Terms & Conditions" placeholder="Terms & Conditions" />
                    )}
                  </Field>
                  <InputField name="fbLink" required={false} label="Facebook Link" placeholder="Facebook Link" />
                  <InputField name="instaLink" required={false} label="Instagram Link" placeholder="Instagram Link" />
                  <InputField name="twitterLink" required={false} label="Twitter Link" placeholder="Twitter Link" />
                  <InputField name="youtubeLink" required={false} label="Youtube Link" placeholder="Youtube Link" />
                  <InputField name="tiktokLink" required={false} label="Tiktok Link" placeholder="Tiktok Link" />
                  <InputField name="supportMail" required={false} label="Support Mail" placeholder="Support Mail" />
                  <InputField name="mapLink" required={false} label="Map Link" placeholder="Map Link" />
                  <div className="flex justify-end">
                    <Button type="submit" className="mt-4">
                      Submit
                    </Button>
                  </div>
                </Form>
              )}
            </Formik>
          </div>
        </>
      )}
    </section>
  );
}