import FormRenderer from '@/components/common/form-renderer';
import { Form } from '@/components/ui/form';
import { useSeoStore } from '@/store/useSeoStore';
import { FormFieldType } from '@/types/form-field-type';
import { zodResolver } from '@hookform/resolvers/zod';
import { GoogleLogoIcon } from '@phosphor-icons/react';
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import ImagePicker from '../fields/image-picker';

export const SeoSchema = z.object({
  og_image: z.string().optional(),
  meta_title: z.string().min(1, 'Meta title is required'),
  meta_description: z.string().min(1, 'Meta description is required'),
  meta_keywords: z.string().optional(),
  disable_seo: z.boolean().optional(),
});

export type TSeoData = z.infer<typeof SeoSchema>;

const getPageFields = (): FormFieldType[] => [
  {
    id: 2,
    name: 'og_image',
    key: 'og_image',
    label: 'Open Graph Image',
    placeholder: 'Enter OG image URL',
    type: 'file',
  },
  {
    id: 2,
    name: 'meta_title',
    key: 'meta_title',
    label: 'Meta Title',
    placeholder: 'Enter meta title',
    type: 'text',
  },
  {
    id: 5,
    name: 'meta_description',
    key: 'meta_description',
    label: 'Meta Description',
    placeholder: 'Enter meta description',
    type: 'textarea',
  },
  {
    id: 6,
    name: 'meta_keywords',
    key: 'meta_keywords',
    label: 'Meta Keywords (comma separated)',
    placeholder: 'Enter meta keywords',
    type: 'text',
  },
  {
    id: 12,
    name: 'disable_seo',
    key: 'disable_seo',
    title: 'Disable SEO',
    label: 'Disable SEO',
    type: 'boolean',
  },
];

const SeoPluginRender = () => {
  const store = useSeoStore();

  const form = useForm<TSeoData>({
    resolver: zodResolver(SeoSchema),
    defaultValues: {
      og_image: store.og_image,
      meta_title: store.meta_title,
      meta_description: store.meta_description,
      meta_keywords: store.meta_keywords,
      disable_seo: store.disable_seo,
    },
  });

  useEffect(() => {
    // eslint-disable-next-line react-hooks/incompatible-library
    const subscription = form.watch((value) => {
      const formData = {
        ...value,
      };
      store.setData({
        og_image: formData.og_image,
        meta_title: formData.meta_title || '',
        meta_description: formData.meta_description || '',
        meta_keywords: formData.meta_keywords || '',
        disable_seo: formData.disable_seo || false,
      });
    });
    return () => subscription.unsubscribe();
  }, [form, store]);

  return (
    <div>
      <Form {...form}>
        <form className="flex h-full flex-col justify-between gap-3 p-4">
          {getPageFields().map((field) => {
            if (field.type === 'file') {
              return (
                <ImagePicker
                  name={field.name}
                  key={field.key}
                  field={field}
                  value={form.getValues(field.name as keyof TSeoData)}
                  onChange={(val) =>
                    form.setValue(field.name as keyof TSeoData, val)
                  }
                />
              );
            }
            return <FormRenderer key={field.key} item={field} form={form} />;
          })}
        </form>
      </Form>
    </div>
  );
};

const SeoPlugin = {
  name: 'seo',
  label: 'SEO',
  icon: <GoogleLogoIcon size={24} />,
  render: () => <SeoPluginRender />,
};

export default SeoPlugin;