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