nobat724_front/app/component/comment/ItemUser.js

import Image from "next/image";
import { Button, Skeleton } from "@mui/material";
import Field from "./Field";

// Icons
import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment";
import BoldLikeComment from "@/components/icons/BoldLikeComment";
import DisLikeComment from "@/components/icons/DisLikeComment";
import ArrowUpComment from "@/components/icons/ArrowUpComment";
import LikeComment from "@/components/icons/LikeComment";

function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
  const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
    if (nameIsLike === "is_like" && data.is_dislike) {
      data.is_dislike = false;
      data.like_status.dislike_count--;
    } else if (
      nameIsLike === "is_dislike" &&
      data.like_status.current_user_like.like
    ) {
      data.like_status.current_user_like.like = false;
      data.like_status.like_count--;
    }
    data[nameLike] = lengthLike;
    data[nameIsLike] = !data[nameIsLike];
    setUpdate(!update);
  };

  return (
    <li className="w-full">
      <div className="flex items-center justify-start gap-2">
        <Image
          className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
          src={data.author?.picture[0]?.url}
          width={40}
          height={40}
          alt="profile"
        />
        <div className="flex flex-col items-start justify-center gap-[8px]">
          <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
            {data.author.real_name}
          </p>
          <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
            3 روز پیش
          </p>
        </div>
      </div>
      <div className="mt-2">
        <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
          {data.comment}
        </p>
        <div className="flex items-center justify-start mt-2 gap-[28px]">
          <div className="flex items-center justify-start gap-1">
            <div
              className="cursor-pointer"
              onClick={() =>
                handleLike(
                  data.like_status.current_user_like.like
                    ? data.like_status.like_count - 1
                    : data.like_status.like_count + 1,
                  data,
                  "like",
                  "is_like"
                )
              }
            >
              {data.like_status.current_user_like.like ? (
                <BoldLikeComment />
              ) : (
                <LikeComment />
              )}
            </div>
            <p className="text-[#6C757D] text-[12px] font-normal select-none">
              {data.like_status.like_count || ""}
            </p>
          </div>
          <div className="flex items-center justify-start gap-1">
            <div
              className="cursor-pointer"
              onClick={() =>
                handleLike(
                  data.is_dislike
                    ? data.like_status.dislike_count - 1
                    : data.like_status.dislike_count + 1,
                  data,
                  "dislike",
                  "is_dislike"
                )
              }
            >
              {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
            </div>
            <p className="text-[#6C757D] text-[12px] font-normal select-none">
              {data.like_status.dislike_count || ""}
            </p>
          </div>
          <Button
            className="!text-[#495057] !text-[12px] !font-medium"
            onClick={() => {
              data.is_open_answer = !data.is_open_answer;
              setUpdate(!update);
            }}
            variant="text"
          >
            پاسخ
          </Button>
        </div>
        <div
          className={`flex flex-col mt-2 justify-center overflow-hidden transition duration-500 items-start gap-2 mb-2
          ${data.is_open_answer ? "max-h-fit" : "max-h-0"}`}
        >
          <Field type="text" title="پاسخ شما..." isPlaceHolder={true} />
          <Button
            variant="contained"
            className="!p-2 !h-10 !text-[12px] !font-medium !text-[#FFF] sm:!py-[10px] md:!px-[12px] !rounded-[8px] !bg-[#5559CE] 
                !shadow-none sm:!shadow-[0px_4px_30px_0px_rgba(56,_160,_162,_0.30)]"
          >
            ارسال پاسخ
          </Button>
        </div>
        {!!data.replies.length && (
          <div className="flex items-center justify-start gap-1 my-2">
            <Button
              className="!text-[#0FA1B3] !text-[12px] !font-medium"
              onClick={() => {
                data.is_open_reply = !data.is_open_reply;
                setUpdate(!update);
              }}
            >
              مشاهده پاسخ ها ({data.replies.length})
              <div
                className={`!mr-1 ${
                  data.is_open_reply ? "!rotate-0" : "!rotate-180"
                }`}
              >
                <ArrowUpComment />
              </div>
            </Button>
          </div>
        )}
        <ul
          className={`flex pr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
            ${data.is_open_reply ? "max-h-fit mt-12" : "max-h-0"}`}
        >
          {data.replies.map((item, idx) => (
            <ItemUser
              key={idx}
              data={item}
              isReply={true}
              update={update}
              setUpdate={setUpdate}
            />
          ))}
        </ul>
      </div>
    </li>
  );
}

export default ItemUser;