"use client";
import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { Loader, MessageCircle, Reply } from 'lucide-react';

import { Button } from '@/components/ui/button';
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger
} from '@/components/ui/sheet';
import { CommentForm } from './comment-form';
import { createCommentSchema, type CreateCommentSchema } from '../_lib/validations';

interface CreateCommentSheetProps {
  postId: string;
  parentId?: string;
}

export function CreateCommentSheet({
  postId,
  parentId
}: CreateCommentSheetProps) {
  const [open, setOpen] = React.useState(false);

  const form = useForm<CreateCommentSchema>({
    resolver: zodResolver(createCommentSchema),
    defaultValues: {
      postId,
      parentId,
      content: ''
    }
  });

  function onSubmit(input: CreateCommentSchema) {
    // createCommentMutation.mutate(input, {
    //   onSuccess: () => {
    //     form.reset();
    //     setOpen(false);
    //   }
    // });
  }

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button variant='outline' size='sm'>
          {parentId ? (
            <>
              <Reply className='size-4' />
              Reply
            </>
          ) : (
            <>
              <MessageCircle className='size-4' />
              Add Comment
            </>
          )}
        </Button>
      </SheetTrigger>
      <SheetContent className='flex flex-col gap-6 px-4 sm:max-w-xl'>
        <SheetHeader className='text-left'>
          <SheetTitle>
            {parentId ? 'Reply to Comment' : 'Add Comment'}
          </SheetTitle>
          <SheetDescription>
            {parentId
              ? 'Write your reply to this comment'
              : 'Share your thoughts about this post'}
          </SheetDescription>
        </SheetHeader>
        <CommentForm form={form} onSubmit={onSubmit}>
          <SheetFooter className='flex flex-row gap-2 pt-2 sm:space-x-0'>
            <SheetClose asChild>
              <Button type='button' variant='outline' className='flex-1'>
                Cancel
              </Button>
            </SheetClose>
            {/* <Button type='submit' disabled={createCommentMutation.isPending} className='flex-1'>
              {createCommentMutation.isPending && (
                <Loader className='animate-spin' />
              )}
              {parentId ? 'Reply' : 'Comment'}
            </Button> */}
          </SheetFooter>
        </CommentForm>
      </SheetContent>
    </Sheet>
  );
}