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,
  loading,
}) {
  const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
    if (nameIsLike === "is_like" && data.is_dislike) {
      data.is_dislike = false;
      data.dislike--;
    } else if (nameIsLike === "is_dislike" && data.is_like) {
      data.is_like = false;
      data.like--;
    }
    data[nameLike] = lengthLike;
    data[nameIsLike] = !data[nameIsLike];
    setUpdate(!update);
  };

  return (
    <li className="w-full">
      <div className="flex items-center justify-start gap-2">
        {loading ? (
          <Skeleton
            variant="circular"
            className="!min-w-[40px] !min-h-[40px]"
          />
        ) : (
          <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.profile}
            width={40}
            height={40}
            alt="profile"
          />
        )}
        <div className="flex flex-col items-start justify-center gap-[8px]">
          {loading ? (
            <Skeleton variant="text" className="!min-w-[70px]" />
          ) : (
            <>
              <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
                {data.name}
              </p>
              <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
                3 روز پیش
              </p>
            </>
          )}
        </div>
      </div>
      <div className="mt-2">
        {loading ? (
          <>
            <Skeleton variant="text" className="!w-full !mt-8" />
            <Skeleton variant="text" className="!w-1/3" />
          </>
        ) : (
          <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.is_like ? data.like - 1 : data.like + 1,
                  data,
                  "like",
                  "is_like"
                )
              }
            >
              {data.is_like ? <BoldLikeComment /> : <LikeComment />}
            </div>
            {loading ? (
              <Skeleton variant="text" className="!min-w-[8px]" />
            ) : (
              <p className="text-[#6C757D] text-[12px] font-normal select-none">
                {data.like}
              </p>
            )}
          </div>
          <div className="flex items-center justify-start gap-1">
            <div
              className="cursor-pointer"
              onClick={() =>
                handleLike(
                  data.is_dislike ? data.dislike - 1 : data.dislike + 1,
                  data,
                  "dislike",
                  "is_dislike"
                )
              }
            >
              {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
            </div>
            {loading ? (
              <Skeleton variant="text" className="!min-w-[8px]" />
            ) : (
              <p className="text-[#6C757D] text-[12px] font-normal select-none">
                {data.dislike}
              </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.replays.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.replays.length})
              <div
                className={`!mr-1 ${
                  data.is_open_reply ? "!rotate-0" : "!rotate-180"
                }`}
              >
                <ArrowUpComment />
              </div>
            </Button>
          </div>
        )}
        <ul
          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
                    ${loading && "w-full"}
                    ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
        >
          {data.replays.map((item, idx) => (
            <ItemUser
              key={idx}
              data={item}
              isReply={true}
              update={update}
              loading={loading}
              setUpdate={setUpdate}
            />
          ))}
        </ul>
      </div>
    </li>
  );
}

export default ItemUser;