import { LoaderCircleIcon } from 'lucide-react';
import React from 'react';
import { useIntl } from 'react-intl';
import { useDisclosure } from '@crux-kit/hooks';
import { Button } from '#shared/ui/Button';
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '#shared/ui/Dialog';
import { Skeleton } from '#shared/ui/Skeleton';
import { useGetDetailed } from '../../api/detailed';
import { FORM_ID, initialValues, MainForm, prepareInitialValues, useSubmit } from '../forms/MainForm';

export const ManageTrigger: React.FC<
  React.PropsWithChildren<{
    title: string;
    id: number | null;
  }>
> = ({ id, children, title }) => {
  const intl = useIntl();

  const dialog = useDisclosure(false);

  const { data, isLoading } = useGetDetailed(
    id == null || dialog.isOpen === false ? undefined : { id: String(id) }
  );

  const { isSubmitting, submit } = useSubmit({ onSuccess: dialog.close });

  return (
    <Dialog open={dialog.isOpen} onOpenChange={dialog.toggle}>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent variant="fullscreen">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription className="sr-only"></DialogDescription>
        </DialogHeader>
        <DialogBody>
          {isLoading ? (
            <div className="grid grid-cols-2 gap-5">
              <Skeleton className="h-15" />
              <Skeleton className="h-15" />
              <Skeleton className="h-15" />
              <Skeleton className="h-15" />
            </div>
          ) : (
            <MainForm
              initialValues={data ? prepareInitialValues(data) : initialValues}
              onSubmit={submit}
            />
          )}
        </DialogBody>
        <DialogFooter>
          <Button type="submit" form={FORM_ID} disabled={isSubmitting}>
            {isSubmitting ? (
              <span className="flex items-center gap-2">
                <LoaderCircleIcon className="h-4 w-4 animate-spin" />
                {intl.formatMessage({ id: 'STATE.SAVING' })}...
              </span>
            ) : (
              intl.formatMessage({ id: 'ACTION.SAVE' })
            )}
          </Button>

          <DialogClose asChild>
            <Button variant="outline">{intl.formatMessage({ id: 'ACTION.CANCEL' })}</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};