"use client";

import useAxios from "@/hooks/useAxios";
import Image from "next/image";
import React, { useEffect, useState } from "react";
import BillboardCommentsModal from "./BillboardCommentsModal";

function MainBillboardCardActions({
  _id,
  likedByUser,
  likesCount: lCount,
  viewCount,
  commentsCount,
  isDetail,
}: {
  _id: string;
  likedByUser: boolean | null;
  likesCount: number;
  viewCount: number;
  commentsCount: number;
  isDetail?: boolean;
}) {
  const [showCommentsModal, setShowCommentsModal] = useState<boolean>(false);
  const [liked, setLiked] = useState<boolean | null>();
  const [likesCount, setLikesCount] = useState<number | null>();
  const { request, loading } = useAxios();

  useEffect(() => {
    setLiked(likedByUser);
    setLikesCount(lCount);
  }, []);
  // تابع برای لایک کردن پست
  const toggleLike = async () => {
    if (loading) return;
    const newLiked = !liked;
    const newLikesCount = newLiked
      ? Number(likesCount) + 1
      : Number(likesCount) - 1;

    // به روز رسانی وضعیت محلی برای لایک و شمارش لایک‌ها
    setLiked(newLiked);
    setLikesCount(newLikesCount);

    try {
      await request(
        "POST",
        "/advertising/like",
        {
          advertisingId: _id,
        },
        { noToast: true }
      );
    } catch (error: unknown) {
      console.log(error);
      setLiked(!newLiked);
      setLikesCount(likesCount);
    }
  };
  return (
    <div
      className={`flex items-center justify-between w-full pl-3 md:pl-4 mt-4  relative ${
        isDetail ? " !justify-start gap-4" : "max-w-[200px]"
      }`}
    >
      {showCommentsModal && (
        <BillboardCommentsModal
          isOpen={showCommentsModal}
          onClose={() => setShowCommentsModal(false)}
          advertisingId={_id}
        />
      )}
      <button
        onClick={(e) => {
          e.stopPropagation();
          toggleLike();
        }}
        className="flex flex-col items-center text-xs font-semibold gap-1"
      >
        <Image
          width={22}
          height={22}
          alt={"heart svg"}
          src={
            !liked ? `/images/icons/heart.svg` : `/images/icons/red-heart.svg`
          }
          className={!liked ? `dark:invert` : ""}
        />
        <span>
          {likesCount ? likesCount : "0"} <span>لایک</span>
        </span>
      </button>
      <button
        onClick={(e) => {
          e.stopPropagation();
          setShowCommentsModal(!showCommentsModal);
        }}
        className="flex flex-col items-center text-xs font-semibold gap-1"
      >
        <Image
          width={22}
          height={22}
          alt={"message-text.svg"}
          src={`/images/icons/message-text.svg`}
          className="dark:invert"
        />
        <span>
          {commentsCount}
          <span className="mr-1">کامنت</span>
        </span>
      </button>
      <button
        className={`flex flex-col items-center text-xs font-semibold gap-1 ${
          isDetail ? "absolute left-0" : ""
        }`}
      >
        <Image
          width={22}
          height={22}
          alt={"eye.svg"}
          src={`/images/icons/eye.svg`}
          className="dark:invert"
        />
        <span>
          {viewCount}
          <span className="mr-1">نمایش</span>
        </span>
      </button>
    </div>
  );
}

export default MainBillboardCardActions;
