import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import { Form } from '@/components/ui/form';
import { Separator } from '@/components/ui/separator';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
import { getMarketCategoryFields } from '@/data/forms/market-category-fields';
import { createRequest } from '@/data/request/create-request';
import { updateRequest } from '@/data/request/update-request';
import {
  MarketCategorySchema,
  TMarketCategoryForm,
} from '@/schema/market-schema';
import { TMarketCategory } from '@/types/market.types';
import { zodResolver } from '@hookform/resolvers/zod';
import { PencilSimpleIcon, PlusIcon } from '@phosphor-icons/react';
import { useEffect, useState, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

const EMPTY: TMarketCategoryForm = {
  name: '',
  description: '',
  icon: undefined,
  sort_order: 0,
  is_active: true,
};

export default function AddCategory({
  refresh,
  editing,
}: {
  refresh: () => void;
  editing?: TMarketCategory;
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();

  const form = useForm({
    resolver: zodResolver(MarketCategorySchema),
    defaultValues: EMPTY,
  });

  useEffect(() => {
    if (isOpen) {
      form.reset(
        editing
          ? {
              name: editing.name,
              description: editing.description ?? '',
              icon: editing.icon ?? undefined,
              sort_order: editing.sort_order,
              is_active: editing.is_active,
            }
          : EMPTY,
      );
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, editing]);

  const onSubmit = (data: TMarketCategoryForm) => {
    startTransition(async () => {
      const fd = new FormData();
      fd.append('name', data.name);
      if (data.description) fd.append('description', data.description);
      if (data.icon instanceof File) fd.append('icon', data.icon);
      fd.append('sort_order', String(data.sort_order));
      fd.append('is_active', data.is_active ? '1' : '0');

      const res = editing
        ? await updateRequest({
            url: `/api/admin/market-categories/${editing.id}`,
            formData: fd,
          })
        : await createRequest({
            url: '/api/admin/market-categories',
            formData: fd,
          });

      if (res) {
        toast.success(
          editing ? t('Category updated.') : t('Category created.'),
        );
        refresh();
        form.reset();
        setIsOpen(false);
      }
    });
  };

  const fileResetKey = `${isOpen ? 'open' : 'closed'}-${editing?.id ?? 'new'}`;
  const formFields = getMarketCategoryFields(t, fileResetKey);

  return (
    <Sheet open={isOpen} onOpenChange={setIsOpen}>
      <SheetTrigger asChild>
        {editing ? (
          <Button variant="ghostPrimary">
            <PencilSimpleIcon weight="bold" className="size-4" />
          </Button>
        ) : (
          <Button variant="default">
            <PlusIcon size={16} />
            {t('Add Category')}
          </Button>
        )}
      </SheetTrigger>
      <SheetContent>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className="flex h-full flex-col justify-between"
          >
            <SheetHeader>
              <SheetTitle>
                {editing ? t('Edit Category') : t('Add Category')}
              </SheetTitle>
            </SheetHeader>

            <div className="mx-4 space-y-4 rounded-xl border border-black/5 p-4">
              <h4 className="text-lg font-medium">{t('Category Details')}</h4>
              <Separator />
              {formFields.map((field) => (
                <FormRenderer form={form} key={field.id} item={field} />
              ))}
            </div>

            <SheetFooter>
              <Button type="submit" loading={isPending} disabled={isPending}>
                {editing ? t('Update Category') : t('Add Category')}
              </Button>
              <SheetClose asChild>
                <Button variant="outline">{t('Close')}</Button>
              </SheetClose>
            </SheetFooter>
          </form>
        </Form>
      </SheetContent>
    </Sheet>
  );
}