"use client";
import React, { useCallback, useTransition } from "react";
import Link from "next/link";
import { toast } from "sonner";
import { Loader2 } from "lucide-react";
import { useForm } from "react-hook-form";
import { Form } from "react-compose-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { InputControl } from "@/components/form/control/input.control";
import { api } from "@/lib/trpc/client";
import { Routes } from "@/config/routes";

const OrganizationFormSchema = z.object({
    name: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    contactName: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    address: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    postalCode: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    city: z.string().min(1, { message: 'Dette felt er påkrævet' }),
    cvr: z.string().min(1, { message: 'Dette felt er påkrævet' })
});

type OrganizationFormData = z.infer<typeof OrganizationFormSchema>;

type OrganizationFormProps = {
    onSubmit?: (organizationId: string) => void;
};

export const OrganizationForm: React.FC<OrganizationFormProps> = (props) => {
    const {
        onSubmit
    } = props;

    const [loading, startTransition] = useTransition();
    const utils = api.useUtils();
    const createOrganizationMutation = api.organization.create.useMutation({
        async onSuccess() {
            await utils.organization.list.invalidate();
        }
    });

    const form = useForm<OrganizationFormData>({
        resolver: zodResolver(OrganizationFormSchema),
        defaultValues: {
            name: "",
            contactName: "",
            address: "",
            postalCode: "",
            city: "",
            cvr: ""
        }
    });

    const handleSubmit = useCallback(async (data: OrganizationFormData) => {
        startTransition(async () => {
            try {
                const organization = await createOrganizationMutation.mutateAsync({
                    data
                });

                if(onSubmit) {
                    onSubmit(organization.id);
                }
            }
            catch(err) {
                // eslint-disable-next-line no-console
                console.error(err);
                toast.error("Kunne ikke oprette organisationen. Prøv igen senere.");
            }
        });
    }, [createOrganizationMutation, onSubmit]);

    return (
        <Form<OrganizationFormData>
          className="flex w-full flex-col gap-4"
          formControl={form}
          onSubmit={handleSubmit}>
            <InputControl
              className="h-11 rounded-none bg-white"
              placeholder="Navn på virksomhed"
              name="name" />

            <InputControl
              className="h-11 rounded-none bg-white"
              placeholder="Adresse"
              name="address" />

            <div className="flex w-full items-start gap-4">
                <InputControl
                  className="h-11 rounded-none bg-white"
                  placeholder="Postnr."
                  name="postalCode" />

                <InputControl
                  containerClassName="w-full"
                  className="h-11 rounded-none bg-white"
                  placeholder="By"
                  name="city" />
            </div>

            <InputControl
              className="h-11 rounded-none bg-white"
              placeholder="CVR nummer"
              name="cvr" />

            <InputControl
              className="h-11 rounded-none bg-white"
              placeholder="Navn på kontaktperson"
              name="contactName" />

            <div className="mt-4 flex w-full flex-col items-center gap-4">
                <button
                  className="bg-client-red hover:bg-client-red/80 flex min-w-56 justify-center rounded-md px-6 py-3 text-lg font-bold text-white transition"
                  type="submit"
                  disabled={loading}>
                    {loading ? (
                        <Loader2 className="animate-spin" />
                    ) : (
                        "Fortsæt til betaling"
                    )}
                </button>

                <Link
                  className="text-sm text-neutral-600 underline hover:text-neutral-800"
                  href={Routes.PAYMENTS.BUSINESS}>
                    Tilbage til oversigt
                </Link>
            </div>
        </Form>
    );
};