import { useAppForm } from '@/hooks/use-app-form';
import { m } from '@/paraglide/messages';
import { updateBoxSchema, updateBoxSchemaType } from '@service/box.schema';
import { Button } from '@ui/button';
import { DialogClose, DialogFooter } from '@ui/dialog';
import { Field, FieldGroup } from '@ui/field';

type EditBoxForAdminProps = {
  data: BoxWithCount;
  onSubmit: (open: boolean) => void;
};

const AdminEditBoxForm = ({ data, onSubmit }: EditBoxForAdminProps) => {
  const form = useAppForm({
    defaultValues: {
      id: data.id,
      name: data.name,
      description: data.description,
      color: data.color || '#000000',
      tags: data.tags || [],
    } as updateBoxSchemaType,
    validators: {
      onSubmit: updateBoxSchema,
      onChange: updateBoxSchema,
    },
    onSubmit: ({ value }) => {
      console.log(value);
    },
  });

  return (
    <form
      id="admin-edit-box-form"
      onSubmit={(e) => {
        e.preventDefault();
        e.stopPropagation();
        form.handleSubmit();
      }}
    >
      <FieldGroup>
        <form.AppField name="name">
          {(field) => <field.TextField label={m.boxes_page_form_name()} />}
        </form.AppField>
        <form.AppField name="description">
          {(field) => (
            <field.TextArea label={m.boxes_page_form_description()} />
          )}
        </form.AppField>
        <form.AppField name="color">
          {(field) => (
            <field.TextField type="color" label={m.boxes_page_form_color()} />
          )}
        </form.AppField>
        <form.AppField name="tags">
          {(field) => (
            <field.TagInput
              label={m.boxes_page_form_tag()}
              placeholder={m.boxes_page_form_tag_placeholder()}
            />
          )}
        </form.AppField>
        <Field>
          <DialogFooter>
            <DialogClose asChild>
              <Button variant="outline" type="button">
                {m.ui_cancel_btn()}
              </Button>
            </DialogClose>
            <form.AppForm>
              <form.SubscribeButton
                label={m.ui_confirm_btn()}
                // disabled={isPending}
              />
            </form.AppForm>
          </DialogFooter>
        </Field>
      </FieldGroup>
    </form>
  );
};

export default AdminEditBoxForm;
