import React, { useCallback, useMemo } from 'react';
import { Text } from '@/components/ui/text';
import CommonImage from '../common/CommonImage';
import { UnknownRecord } from '@/types';
import { globalApiPost } from '@/services/global';
import { API_ENDPOINTS } from '@/constants';
import { store } from '@/store/store';
import { hydrateSession } from '@/store/slices/sessionSlice';
import { ConfirmDialog } from '../common/ConfirmDialog';
import { useToast } from '@/hooks/use-toast';

interface BookmarkDialogProps {
  props: UnknownRecord;
}

const BookmarkDialog: React.FC<BookmarkDialogProps> = ({ props }) => {
  const { toast } = useToast();
  const { src, message, action } = useMemo(() => {
    const hasBookmark = Boolean(props?.id);
    return {
      src: hasBookmark
        ? '/header/bookmark_regular_solid.webp'
        : '/header/bookmark_regular.webp',
      message: hasBookmark
        ? 'Do you want to remove this page from bookmark?'
        : 'Do you want to add this page to bookmark?',
      action: hasBookmark ? 'delete' : 'add',
    };
  }, [props?.id]);

  const handleBookmarkToggle = useCallback(async () => {
    try {
      const bookmarks = await globalApiPost<UnknownRecord[]>(
        API_ENDPOINTS.USER.MENU_BOOKMARK,
        {
          id: Number(props?.id ?? 0),
          menu_link: props?.menu_link ?? '',
          menu_name: props?.menu_name ?? '',
          action: action,
        },
      );

      toast({
        variant: 'success',
        title: `Bookmark ${props?.id ? 'removed' : 'added'} successfully.`,
        duration: 2000,
      });
      store.dispatch(
        hydrateSession({ menuBookmarks: (bookmarks as UnknownRecord[]) || [] }),
      );
    } catch (error) {
      console.error('Error toggling bookmark:', error);
      toast({
        variant: 'destructive',
        title: `Some error occurred while ${props?.id ? 'removing' : 'adding'} bookmark.`,
        duration: 2000,
      });
    }
  }, [props?.id, props?.menu_link, props?.menu_name, action, toast]);

  return (
    <Text className="bookmark-toggle">
      <ConfirmDialog
        message={message}
        onConfirm={handleBookmarkToggle}
        trigger={
          <span>
            <CommonImage
              src={src}
              classname="cursor-pointer"
              alt="bookmark"
              width={20}
              height={20}
            />
          </span>
        }
      />
    </Text>
  );
};

export default React.memo(BookmarkDialog);