"use client";
import AppHeader from "@comp/AppHeader/page";
import { useRouter } from "next/navigation";
import React, { useContext, useEffect, useState } from "react";

import AppContext from "@ctx/AppContext";
import Chapar from "plugins/Chapar";
import { toast } from "react-toastify";
import Avatar from "boring-avatars";
import PersianNumber from "../../../plugins/PersianNumber";
import moment from "jalali-moment";
import InfiniteScroll from "react-infinite-scroll-component";

const page = () => {
  const router = useRouter();
  const CTX = useContext(AppContext);
  const [typeNews, setTypeNews] = useState(1);
  const [notifData, setNotifData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [hasMore, setHasMore] = useState(true);

  const markAsRead = async (id, notifData, setNotifData) => {
    console.log("ssssssssssssssssssssssssssss");
    try {
      const data = await Chapar.post(
        `${process.env.NEXT_PUBLIC_API_URL}/notification/${id}/read`
      );

      // Update the local state to mark the notification as read
      const updatedNotifData = notifData.map((notif) =>
        notif.id === id ? { ...notif, isRead: true } : notif
      );
      setNotifData(updatedNotifData);
      return data;
    } catch ({ error, status }) {
      toast.error(`در خواندن نوتیف مشکلی هست`, {
        position: "bottom-right",
        closeOnClick: true,
      });
    }
  };

  const loadNotifications = async () => {
    setLoading(true);
    try {
      const data = await Chapar.get(
        `${
          process.env.NEXT_PUBLIC_API_URL
        }/notification?page=${page}&count=${40}`
      );

      if (data.length === 0) {
        setHasMore(false);
      } else {
        setNotifData((prevData) => [...prevData, ...data]);
        setPage((prevPage) => prevPage + 1);
      }
      setLoading(false);
    } catch ({ error, status }) {
      toast.error(`${error?.response?.data?.message}`, {
        position: "bottom-right",
        closeOnClick: true,
      });
      setLoading(false);
    }
  };

  useEffect(() => {
    loadNotifications();
  }, []);

  let lastDate = null;

  return (
    <>
      {" "}
      <div className="pb-10">
        <AppHeader title="خبر های مجموعه" sub="اخبار و نوتیف های مجموعه" />

        {}
        <div className="bg-white overflow-hidden p-5 rtl relative">
          {" "}
          <div className="flex bg-gray-100 rounded-xl">
            <div
              className={` p-2 w-full rounded-xl tr03 ${
                typeNews == 0 ? "bg-secondary-950" : ""
              } `}
              onClick={() => setTypeNews(0)}
            >
              <p
                className={`mb-0 text-center  text-sm ${
                  typeNews == 0 ? "text-white" : " text-secondary-900"
                }`}
              >
                اخبار{" "}
              </p>
            </div>
            <div
              className={` p-2 w-full rounded-xl tr03 ${
                typeNews == 1 ? "bg-secondary-950" : ""
              } `}
              onClick={() => setTypeNews(1)}
            >
              <p
                className={`mb-0 text-center text-sm ${
                  typeNews == 1 ? "text-white" : " text-secondary-900"
                }`}
              >
                نوتیف{" "}
              </p>
            </div>
          </div>
          {typeNews == 0 ? (
            <div className="blur-sm">
              <div className=" mt-5 mb-[20px]">
                <div className="my-4 flex sticky top-0">
                  <div className="w-1/12">
                    <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                      <Avatar
                        size={40}
                        name={"hamed hossein"}
                        variant="beam"
                        colors={["#9d9f88", "#83af96", "#b2de93"]}
                      />

                      <div className="flex justify-center mt-3">
                        <div className="absolute">
                          <div className="h-[80px] bg-gray-100 opacity-70 w-[2px]"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="w-11/12 mr-5 mt-1">
                    <h4 className="text-sm font-bold">محمد کاشغی</h4>

                    <div className="flex mt-2 gap-2">
                      <div className="bg-gray-100 flex rounded-2xl px-1">
                        <svg
                          width="15"
                          height="15"
                          viewBox="0 0 235 124"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="opacity-50 mt-[2px]"
                        >
                          <path
                            d="M160.75 124C152.328 124 145.5 117.172 145.5 108.75C145.5 100.327 152.328 93.4995 160.75 93.4995L219.75 93.4995C228.172 93.4995 235 100.327 235 108.75C235 117.172 228.172 124 219.75 124L160.75 124ZM88.4999 26.4998C81.3202 26.4998 75.5 20.6795 75.5 13.4999C75.5 6.32025 81.3202 0.499996 88.4999 0.499996L222 0.499998C229.18 0.499998 235 6.32025 235 13.4999C235 20.6795 229.18 26.4998 222 26.4998L88.4999 26.4998ZM13 72.4996C6.09643 72.4996 0.499998 66.9031 0.499997 59.9996C0.499997 53.096 6.09643 47.4996 13 47.4996L222.5 47.4996C229.404 47.4996 235 53.096 235 59.9996C235 66.9031 229.404 72.4996 222.5 72.4996L13 72.4996Z"
                            fill="#374151"
                          />
                        </svg>

                        <p className="mb-0 text-[12px] text-gray-700 opacity-50 mr-1">
                          نظر سنجی
                        </p>
                      </div>

                      <div className="bg-gray-100 flex rounded-2xl px-1">
                        <svg
                          width="15"
                          height="15"
                          viewBox="0 0 228 228"
                          fill="none"
                          xmlns="http://www.w3.org/2000/svg"
                          className="opacity-50 mt-[2px]"
                        >
                          <path
                            fill-rule="evenodd"
                            clip-rule="evenodd"
                            d="M92.017 23.8636C93.874 24.095 95.6672 24.6899 97.2943 25.6144C98.9214 26.5388 100.35 27.7747 101.5 29.2514C102.649 30.7281 103.497 32.4168 103.994 34.221C104.49 36.0252 104.627 37.9096 104.396 39.7666L101.052 66.4996H138.823L142.614 36.2326C143.083 32.4822 145.022 29.0717 148.005 26.7511C150.988 24.4306 154.771 23.3902 158.522 23.8589C162.272 24.3275 165.683 26.2668 168.003 29.25C170.324 32.2333 171.364 36.0162 170.896 39.7666L167.551 66.4996H190C193.779 66.4996 197.404 68.0009 200.076 70.6733C202.749 73.3457 204.25 76.9703 204.25 80.7496C204.25 84.5289 202.749 88.1535 200.076 90.8259C197.404 93.4983 193.779 94.9996 190 94.9996H163.989L159.239 133H185.25C189.029 133 192.654 134.501 195.326 137.173C197.999 139.846 199.5 143.47 199.5 147.25C199.5 151.029 197.999 154.653 195.326 157.326C192.654 159.998 189.029 161.5 185.25 161.5H155.676L151.896 191.767C151.427 195.517 149.488 198.928 146.504 201.248C143.521 203.569 139.738 204.609 135.988 204.14C132.237 203.672 128.827 201.732 126.506 198.749C124.186 195.766 123.145 191.983 123.614 188.233L126.948 161.5H89.186L85.405 191.767C84.9364 195.517 82.9971 198.928 80.0138 201.248C77.0305 203.569 73.2476 204.609 69.4972 204.14C65.7469 203.672 62.3363 201.732 60.0158 198.749C57.6952 195.766 56.6549 191.983 57.1235 188.233L60.4485 161.5H42.75C38.9707 161.5 35.3461 159.998 32.6737 157.326C30.0013 154.653 28.5 151.029 28.5 147.25C28.5 143.47 30.0013 139.846 32.6737 137.173C35.3461 134.501 38.9707 133 42.75 133H64.011L68.761 94.9996H47.5C43.7207 94.9996 40.0961 93.4983 37.4237 90.8259C34.7513 88.1535 33.25 84.5289 33.25 80.7496C33.25 76.9703 34.7513 73.3457 37.4237 70.6733C40.0961 68.0009 43.7207 66.4996 47.5 66.4996H72.3235L76.114 36.2326C76.3443 34.3748 76.9383 32.5805 77.8623 30.9523C78.7862 29.3242 80.0219 27.894 81.4988 26.7436C82.9756 25.5932 84.6647 24.745 86.4695 24.2476C88.2742 23.7502 90.1593 23.6132 92.017 23.8446V23.8636ZM130.53 133L135.28 94.9996H97.4985L92.7485 133H130.53Z"
                            fill="black"
                          />
                        </svg>

                        <p className="mb-0 text-[12px] text-gray-700 opacity-50 mr-1">
                          اختصاصی{" "}
                        </p>
                      </div>
                    </div>

                    <div className="mt-2">
                      <textarea
                        type="text"
                        className="form-control-white !border !border-gray-100 text-[12px] !p-2 !min-h-[70px]"
                        placeholder="منتظر بودیم خبر بدی !!"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div className="mt-5">
                <p className="mb-0 font-medium text-sm">امروز</p>

                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"hamed hossein"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />

                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[78px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-5 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">محمد کاشغی</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"علی سلامیان"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[20px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">علی سلامیان اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"بیاب اصل"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[137px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">شهاب اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با
                        هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت
                        و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان
                        را می طلبد{" "}
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"بیاب اصل"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">شهاب اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"hamed hossein"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />

                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[78px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-5 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">محمد کاشغی</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"علی سلامیان"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[20px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">علی سلامیان اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"بیاب اصل"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                        <div className="flex justify-center">
                          <div className="absolute">
                            <div className="h-[137px] bg-gray-200 w-[2px]"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">شهاب اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
                        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با
                        هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت
                        و سه درصد گذشته حال و آینده شناخت فراوان جامعه و متخصصان
                        را می طلبد{" "}
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div className="mt-4 flex">
                    <div className="w-1/12">
                      <div className="w-[40px] h-[40px] rounded-full bg-red-200">
                        <Avatar
                          size={40}
                          name={"بیاب اصل"}
                          variant="beam"
                          colors={["#9d9f88", "#83af96", "#b2de93"]}
                        />
                      </div>
                    </div>
                    <div className="w-11/12 mr-4 mt-1">
                      <div className="flex justify-between">
                        <h4 className="text-sm font-bold">شهاب اصل</h4>
                        <small>
                          {" "}
                          <PersianNumber
                            number={moment().locale("fa").format("hh:mm")}
                            style={"!text-[12px] font-bold"}
                          />
                        </small>
                      </div>
                      <p className="mb-0 text-[13px] text-gray-500">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت
                        چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                        بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="mt-5 mb-[20px]">
              <InfiniteScroll
                dataLength={notifData.length}
                next={loadNotifications}
                hasMore={hasMore}
                loader={
                  <h4 className="mt-5 text-center text-sm">صبر کنید...</h4>
                }
              >
                {notifData.map((e) => {
                  const notificationDate = moment(e.createdAt).format(
                    "YYYY-MM-DD"
                  );
                  const showDateHeader = notificationDate !== lastDate;
                  lastDate = notificationDate;

                  return (
                    <div key={e.id}>
                      {showDateHeader && (
                        <div className="mt-6">
                          <p className="mb-0 font-medium text-sm text-gray-400">
                            {notificationDate === moment().format("YYYY-MM-DD")
                              ? "امروز"
                              : moment(notificationDate)
                                  .locale("fa")
                                  .format("YYYY/MM/DD")}
                          </p>
                        </div>
                      )}
                      <div className="mt-4 flex">
                        <div className="">
                          <div className="w-1 h-[40px] rounded-full bg-gray-100"></div>
                        </div>
                        <div className="w-full mr-2 mt-1">
                          <div className="flex justify-between">
                            <p className="mb-0 text-sm font-bold">
                              توک :
                              <small className="text-sm font-normal">
                                {" "}
                                {e.message}
                              </small>
                              <small className="bg-gray-100 rounded-full px-2">
                                {" "}
                                <PersianNumber
                                  number={moment(e.createdAt)
                                    .locale("fa")
                                    .format("hh:mm")}
                                  style={"!text-[12px] font-bold"}
                                />
                              </small>
                              {!e.isRead && (
                                <small
                                  className="mr-1 bg-gray-100 px-2 rounded-full font-normal"
                                  onClick={() =>
                                    markAsRead(e.id, notifData, setNotifData)
                                  }
                                >
                                  دیدم
                                </small>
                              )}
                            </p>
                          </div>
                        </div>
                      </div>
                    </div>
                  );
                })}
              </InfiniteScroll>
            </div>
          )}
        </div>
      </div>
    </>
  );
};

export default page;
