"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { close, error, loading } from "@/config/swal";
import { Input } from "@/components/ui/input";

import { useEffect, useRef } from "react";
import { getPrivacy, savePrivacy } from "@/service/settings/settings";
import { useToast } from "@/components/ui/use-toast";
import { Button } from "@/components/ui/button";
import dynamic from "next/dynamic";

const CustomEditor = dynamic(
  () => {
    return import("@/components/editor/custom-editor");
  },
  { ssr: false }
);

const FormSchema = z.object({
  title: z.string({
    required_error: "Required",
  }),
  description: z.string({
    required_error: "Required",
  }),
});

export default function AdminPrivacyPolicy() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });
  const editor = useRef(null);
  const { toast } = useToast();

  useEffect(() => {
    getPrivacyData();
  }, []);

  async function getPrivacyData() {
    const response = await getPrivacy("1");
    console.log(response?.data?.data);
    form.setValue("title", response?.data?.data?.title);
    form.setValue("description", response?.data?.data?.htmlContent);
  }

  const onSubmit = async (data: z.infer<typeof FormSchema>) => {
    const req = {
      id: 1,
      title: data.title,
      htmlContent: data.description,
      isActive: true,
    };

    const response = await savePrivacy(req);
    if (response?.error) {
      error(response?.message);
      return false;
    }
    toast({
      title: "Berhasil Simpan",
    });
  };
  return (
    <>
      <SiteBreadcrumb />
      <Form {...form}>
        <form
          onSubmit={form.handleSubmit(onSubmit)}
          className="space-y-3 bg-white rounded-sm p-4"
        >
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Judul</FormLabel>
                <Input
                  value={field.value}
                  placeholder="Masukkan Judul"
                  onChange={field.onChange}
                />

                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="description"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Konten</FormLabel>
                <FormControl>
                  <CustomEditor
                    onChange={field.onChange}
                    initialData={field.value}
                  />
                </FormControl>

                <FormMessage />
              </FormItem>
            )}
          />
          <div className="flex justify-end">
            <Button color="primary" type="submit">
              Simpan
            </Button>
          </div>
        </form>
      </Form>
    </>
  );
}