"use client";

import AppHeader from "@comp/AppHeader/page";
import TaskCard from "@comp/TaskCard/page";
import AppContext from "@ctx/AppContext";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { getToken } from "plugins/Chapar";
import { ParseJwt } from "plugins/ParseJwt/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

const Home = (props) => {
  const CTX = useContext(AppContext);
  const router = useRouter();

  const profile = CTX.state.profile;

  useEffect(() => {
    if (!!localStorage.token) {
      const datatoken = ParseJwt(getToken());
      CTX.setComplexId(datatoken.ComplexId);

      if (datatoken.SignUpStatus == 1) {
        CTX.setStepLogin(2);
        router.push(`/login?phoneNumber=${datatoken.unique_name}`);
      }
    } else {
      router.push("/login");
    }
  }, []);

  return (
    <div className="pb-20">
      <AppHeader
        title={profile?.firstName + "     " + profile?.lastName}
        sub={profile.selectedComplexName}
        icon1={true}
        iconName1="ACOUNT"
        iconHref1="/acount"
        iconEvent1={() => {
          return undefined;
        }}
        icon2={true}
        iconName2="NINJA"
        iconHref2="#"
        iconEvent2={() => {
          return undefined;
        }}
        userIcon={true}
        userIconData={profile.firstName}
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-5 rtl">
        <div className="flex justify-between">
          <div>
            <h4 className="text-base  font-bold">تسک های هفتگی مجموعه</h4>
            <p className="mb-0 text-sm">
              امروز
              <strong className="mx-1 text-primary-300">
                <PersianNumber number={24} />
              </strong>
              تسک فعال دارید
            </p>
          </div>

          <div className="w-[40px] h-[40px] bg-white shadow-sm rounded-xl">
            <svg
              width="23"
              height="27"
              viewBox="0 0 16 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mx-auto mt-[6px]"
            >
              <path
                d="M5 3.00001C4.73478 3.00001 4.48043 3.10537 4.29289 3.2929C4.10536 3.48044 4 3.73479 4 4.00001C4 4.26523 4.10536 4.51958 4.29289 4.70712C4.48043 4.89465 4.73478 5.00001 5 5.00001C5.26522 5.00001 5.51957 4.89465 5.70711 4.70712C5.89464 4.51958 6 4.26523 6 4.00001C6 3.73479 5.89464 3.48044 5.70711 3.2929C5.51957 3.10537 5.26522 3.00001 5 3.00001ZM2.17 3.00001C2.3766 2.41448 2.75974 1.90744 3.2666 1.5488C3.77346 1.19015 4.37909 0.997559 5 0.997559C5.62091 0.997559 6.22654 1.19015 6.7334 1.5488C7.24026 1.90744 7.6234 2.41448 7.83 3.00001H15C15.2652 3.00001 15.5196 3.10537 15.7071 3.2929C15.8946 3.48044 16 3.73479 16 4.00001C16 4.26523 15.8946 4.51958 15.7071 4.70712C15.5196 4.89465 15.2652 5.00001 15 5.00001H7.83C7.6234 5.58554 7.24026 6.09258 6.7334 6.45122C6.22654 6.80986 5.62091 7.00246 5 7.00246C4.37909 7.00246 3.77346 6.80986 3.2666 6.45122C2.75974 6.09258 2.3766 5.58554 2.17 5.00001H1C0.734784 5.00001 0.48043 4.89465 0.292893 4.70712C0.105357 4.51958 0 4.26523 0 4.00001C0 3.73479 0.105357 3.48044 0.292893 3.2929C0.48043 3.10537 0.734784 3.00001 1 3.00001H2.17ZM11 9.00001C10.7348 9.00001 10.4804 9.10537 10.2929 9.2929C10.1054 9.48044 10 9.73479 10 10C10 10.2652 10.1054 10.5196 10.2929 10.7071C10.4804 10.8947 10.7348 11 11 11C11.2652 11 11.5196 10.8947 11.7071 10.7071C11.8946 10.5196 12 10.2652 12 10C12 9.73479 11.8946 9.48044 11.7071 9.2929C11.5196 9.10537 11.2652 9.00001 11 9.00001ZM8.17 9.00001C8.3766 8.41448 8.75974 7.90744 9.2666 7.5488C9.77346 7.19015 10.3791 6.99756 11 6.99756C11.6209 6.99756 12.2265 7.19015 12.7334 7.5488C13.2403 7.90744 13.6234 8.41448 13.83 9.00001H15C15.2652 9.00001 15.5196 9.10537 15.7071 9.2929C15.8946 9.48044 16 9.73479 16 10C16 10.2652 15.8946 10.5196 15.7071 10.7071C15.5196 10.8947 15.2652 11 15 11H13.83C13.6234 11.5855 13.2403 12.0926 12.7334 12.4512C12.2265 12.8099 11.6209 13.0025 11 13.0025C10.3791 13.0025 9.77346 12.8099 9.2666 12.4512C8.75974 12.0926 8.3766 11.5855 8.17 11H1C0.734784 11 0.48043 10.8947 0.292893 10.7071C0.105357 10.5196 0 10.2652 0 10C0 9.73479 0.105357 9.48044 0.292893 9.2929C0.48043 9.10537 0.734784 9.00001 1 9.00001H8.17ZM5 15C4.73478 15 4.48043 15.1054 4.29289 15.2929C4.10536 15.4804 4 15.7348 4 16C4 16.2652 4.10536 16.5196 4.29289 16.7071C4.48043 16.8947 4.73478 17 5 17C5.26522 17 5.51957 16.8947 5.70711 16.7071C5.89464 16.5196 6 16.2652 6 16C6 15.7348 5.89464 15.4804 5.70711 15.2929C5.51957 15.1054 5.26522 15 5 15ZM2.17 15C2.3766 14.4145 2.75974 13.9074 3.2666 13.5488C3.77346 13.1902 4.37909 12.9976 5 12.9976C5.62091 12.9976 6.22654 13.1902 6.7334 13.5488C7.24026 13.9074 7.6234 14.4145 7.83 15H15C15.2652 15 15.5196 15.1054 15.7071 15.2929C15.8946 15.4804 16 15.7348 16 16C16 16.2652 15.8946 16.5196 15.7071 16.7071C15.5196 16.8947 15.2652 17 15 17H7.83C7.6234 17.5855 7.24026 18.0926 6.7334 18.4512C6.22654 18.8099 5.62091 19.0025 5 19.0025C4.37909 19.0025 3.77346 18.8099 3.2666 18.4512C2.75974 18.0926 2.3766 17.5855 2.17 17H1C0.734784 17 0.48043 16.8947 0.292893 16.7071C0.105357 16.5196 0 16.2652 0 16C0 15.7348 0.105357 15.4804 0.292893 15.2929C0.48043 15.1054 0.734784 15 1 15H2.17Z"
                fill="#666666"
              />
            </svg>
          </div>
        </div>

        <Swiper
          spaceBetween={20}
          slidesPerView={1.6}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
        >
          <SwiperSlide>
            <div className=" bg-white h-[180px]  rounded-3xl overflow-hidden relative  mt-5">
              <div className="flex mx-2">
                <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                  اهمیت بالا{" "}
                </div>
                <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                  شیفت صبح
                </div>
              </div>
              <div className=" relative  m-2  text-white">
                <div className="text-right">
                  <h4 className="mb-0 text-primary-300  font-semibold text-sm">
                    کارگاه بدنسازی در خانه برای رستوران توگک
                  </h4>
                </div>

                <div className="flex">
                  <div className="flex rtl mt-2 w-full">
                    <div className="absolute right-[0px] bg-red-900 w-[40px] h-[40px] rounded-full border-2 z-[1]"></div>
                    <div className="absolute right-[13px] bg-green-900 w-[40px] h-[40px] rounded-full border-2 z-[2]"></div>
                    <div className="absolute right-[26px] bg-sky-900 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                  </div>

                  <div className="relative w-full">
                    <p className="text-black text-sm mt-4">
                      +
                      <strong className="mx-1">
                        <PersianNumber number={3} />
                      </strong>
                      نفر دیگر
                    </p>
                  </div>
                </div>

                <div className="flex mt-6 relative">
                  <div>
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 14 14"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11.0833 2.33332H9.91667V1.74999C9.91667 1.59528 9.85522 1.44691 9.74582 1.33751C9.63642 1.22811 9.48805 1.16666 9.33334 1.16666C9.17863 1.16666 9.03026 1.22811 8.92086 1.33751C8.81146 1.44691 8.75001 1.59528 8.75001 1.74999V2.33332H5.25001V1.74999C5.25001 1.59528 5.18855 1.44691 5.07915 1.33751C4.96975 1.22811 4.82138 1.16666 4.66667 1.16666C4.51196 1.16666 4.36359 1.22811 4.25419 1.33751C4.1448 1.44691 4.08334 1.59528 4.08334 1.74999V2.33332H2.91667C2.45254 2.33332 2.00742 2.5177 1.67923 2.84589C1.35105 3.17408 1.16667 3.61919 1.16667 4.08332V11.0833C1.16667 11.5475 1.35105 11.9926 1.67923 12.3208C2.00742 12.6489 2.45254 12.8333 2.91667 12.8333H11.0833C11.5475 12.8333 11.9926 12.6489 12.3208 12.3208C12.649 11.9926 12.8333 11.5475 12.8333 11.0833V4.08332C12.8333 3.61919 12.649 3.17408 12.3208 2.84589C11.9926 2.5177 11.5475 2.33332 11.0833 2.33332ZM11.6667 11.0833C11.6667 11.238 11.6052 11.3864 11.4958 11.4958C11.3864 11.6052 11.238 11.6667 11.0833 11.6667H2.91667C2.76196 11.6667 2.61359 11.6052 2.50419 11.4958C2.3948 11.3864 2.33334 11.238 2.33334 11.0833V6.99999H11.6667V11.0833ZM11.6667 5.83332H2.33334V4.08332C2.33334 3.92861 2.3948 3.78024 2.50419 3.67084C2.61359 3.56145 2.76196 3.49999 2.91667 3.49999H4.08334V4.08332C4.08334 4.23803 4.1448 4.38641 4.25419 4.4958C4.36359 4.6052 4.51196 4.66666 4.66667 4.66666C4.82138 4.66666 4.96975 4.6052 5.07915 4.4958C5.18855 4.38641 5.25001 4.23803 5.25001 4.08332V3.49999H8.75001V4.08332C8.75001 4.23803 8.81146 4.38641 8.92086 4.4958C9.03026 4.6052 9.17863 4.66666 9.33334 4.66666C9.48805 4.66666 9.63642 4.6052 9.74582 4.4958C9.85522 4.38641 9.91667 4.23803 9.91667 4.08332V3.49999H11.0833C11.238 3.49999 11.3864 3.56145 11.4958 3.67084C11.6052 3.78024 11.6667 3.92861 11.6667 4.08332V5.83332Z"
                        fill="#888888"
                      />
                    </svg>
                  </div>
                  <p className="mb-0 text-textMain-100 text-sm opacity-70 mr-1">
                    دوشنبه
                    <strong className="mx-1">
                      <PersianNumber number={19} />
                    </strong>
                    اردیبهشت
                    <strong className="mx-1">
                      <PersianNumber number={1401} />
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </SwiperSlide>

          <SwiperSlide>
            <div className=" bg-white h-[180px]  rounded-3xl overflow-hidden relative  mt-5">
              <div className="flex mx-2">
                <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                  اهمیت بالا{" "}
                </div>
                <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                  شیفت صبح
                </div>
              </div>
              <div className=" relative  m-2  text-white">
                <div className="text-right">
                  <h4 className="mb-0 text-primary-300  font-semibold text-sm">
                    کارگاه بدنسازی در خانه برای رستوران توگک
                  </h4>
                </div>

                <div className="flex">
                  <div className="flex rtl mt-2 w-full">
                    <div className="absolute right-[0px] bg-red-900 w-[40px] h-[40px] rounded-full border-2 z-[1]"></div>
                    <div className="absolute right-[13px] bg-green-900 w-[40px] h-[40px] rounded-full border-2 z-[2]"></div>
                    <div className="absolute right-[26px] bg-sky-900 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                  </div>

                  <div className="relative w-full">
                    <p className="text-black text-sm mt-4">
                      +
                      <strong className="mx-1">
                        <PersianNumber number={3} />
                      </strong>
                      نفر دیگر
                    </p>
                  </div>
                </div>

                <div className="flex mt-6 relative">
                  <div>
                    <svg
                      width="20"
                      height="20"
                      viewBox="0 0 14 14"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M11.0833 2.33332H9.91667V1.74999C9.91667 1.59528 9.85522 1.44691 9.74582 1.33751C9.63642 1.22811 9.48805 1.16666 9.33334 1.16666C9.17863 1.16666 9.03026 1.22811 8.92086 1.33751C8.81146 1.44691 8.75001 1.59528 8.75001 1.74999V2.33332H5.25001V1.74999C5.25001 1.59528 5.18855 1.44691 5.07915 1.33751C4.96975 1.22811 4.82138 1.16666 4.66667 1.16666C4.51196 1.16666 4.36359 1.22811 4.25419 1.33751C4.1448 1.44691 4.08334 1.59528 4.08334 1.74999V2.33332H2.91667C2.45254 2.33332 2.00742 2.5177 1.67923 2.84589C1.35105 3.17408 1.16667 3.61919 1.16667 4.08332V11.0833C1.16667 11.5475 1.35105 11.9926 1.67923 12.3208C2.00742 12.6489 2.45254 12.8333 2.91667 12.8333H11.0833C11.5475 12.8333 11.9926 12.6489 12.3208 12.3208C12.649 11.9926 12.8333 11.5475 12.8333 11.0833V4.08332C12.8333 3.61919 12.649 3.17408 12.3208 2.84589C11.9926 2.5177 11.5475 2.33332 11.0833 2.33332ZM11.6667 11.0833C11.6667 11.238 11.6052 11.3864 11.4958 11.4958C11.3864 11.6052 11.238 11.6667 11.0833 11.6667H2.91667C2.76196 11.6667 2.61359 11.6052 2.50419 11.4958C2.3948 11.3864 2.33334 11.238 2.33334 11.0833V6.99999H11.6667V11.0833ZM11.6667 5.83332H2.33334V4.08332C2.33334 3.92861 2.3948 3.78024 2.50419 3.67084C2.61359 3.56145 2.76196 3.49999 2.91667 3.49999H4.08334V4.08332C4.08334 4.23803 4.1448 4.38641 4.25419 4.4958C4.36359 4.6052 4.51196 4.66666 4.66667 4.66666C4.82138 4.66666 4.96975 4.6052 5.07915 4.4958C5.18855 4.38641 5.25001 4.23803 5.25001 4.08332V3.49999H8.75001V4.08332C8.75001 4.23803 8.81146 4.38641 8.92086 4.4958C9.03026 4.6052 9.17863 4.66666 9.33334 4.66666C9.48805 4.66666 9.63642 4.6052 9.74582 4.4958C9.85522 4.38641 9.91667 4.23803 9.91667 4.08332V3.49999H11.0833C11.238 3.49999 11.3864 3.56145 11.4958 3.67084C11.6052 3.78024 11.6667 3.92861 11.6667 4.08332V5.83332Z"
                        fill="#888888"
                      />
                    </svg>
                  </div>
                  <p className="mb-0 text-textMain-100 text-sm opacity-70 mr-1">
                    دوشنبه
                    <strong className="mx-1">
                      <PersianNumber number={19} />
                    </strong>
                    اردیبهشت
                    <strong className="mx-1">
                      <PersianNumber number={1401} />
                    </strong>
                  </p>
                </div>
              </div>
            </div>
          </SwiperSlide>
        </Swiper>

        <div className="flex justify-between mt-7">
          <div>
            <h4 className="text-base  font-bold">تسک های امروز</h4>
            <p className="mb-0 text-sm">
              امروز
              <strong className="mx-1 text-primary-300">
                <PersianNumber number={24} />
              </strong>
              تسک فعال دارید
            </p>
          </div>

          <div className="w-[40px] h-[40px] bg-white shadow-sm rounded-xl">
            <svg
              width="23"
              height="27"
              viewBox="0 0 16 20"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              className="mx-auto mt-[6px]"
            >
              <path
                d="M5 3.00001C4.73478 3.00001 4.48043 3.10537 4.29289 3.2929C4.10536 3.48044 4 3.73479 4 4.00001C4 4.26523 4.10536 4.51958 4.29289 4.70712C4.48043 4.89465 4.73478 5.00001 5 5.00001C5.26522 5.00001 5.51957 4.89465 5.70711 4.70712C5.89464 4.51958 6 4.26523 6 4.00001C6 3.73479 5.89464 3.48044 5.70711 3.2929C5.51957 3.10537 5.26522 3.00001 5 3.00001ZM2.17 3.00001C2.3766 2.41448 2.75974 1.90744 3.2666 1.5488C3.77346 1.19015 4.37909 0.997559 5 0.997559C5.62091 0.997559 6.22654 1.19015 6.7334 1.5488C7.24026 1.90744 7.6234 2.41448 7.83 3.00001H15C15.2652 3.00001 15.5196 3.10537 15.7071 3.2929C15.8946 3.48044 16 3.73479 16 4.00001C16 4.26523 15.8946 4.51958 15.7071 4.70712C15.5196 4.89465 15.2652 5.00001 15 5.00001H7.83C7.6234 5.58554 7.24026 6.09258 6.7334 6.45122C6.22654 6.80986 5.62091 7.00246 5 7.00246C4.37909 7.00246 3.77346 6.80986 3.2666 6.45122C2.75974 6.09258 2.3766 5.58554 2.17 5.00001H1C0.734784 5.00001 0.48043 4.89465 0.292893 4.70712C0.105357 4.51958 0 4.26523 0 4.00001C0 3.73479 0.105357 3.48044 0.292893 3.2929C0.48043 3.10537 0.734784 3.00001 1 3.00001H2.17ZM11 9.00001C10.7348 9.00001 10.4804 9.10537 10.2929 9.2929C10.1054 9.48044 10 9.73479 10 10C10 10.2652 10.1054 10.5196 10.2929 10.7071C10.4804 10.8947 10.7348 11 11 11C11.2652 11 11.5196 10.8947 11.7071 10.7071C11.8946 10.5196 12 10.2652 12 10C12 9.73479 11.8946 9.48044 11.7071 9.2929C11.5196 9.10537 11.2652 9.00001 11 9.00001ZM8.17 9.00001C8.3766 8.41448 8.75974 7.90744 9.2666 7.5488C9.77346 7.19015 10.3791 6.99756 11 6.99756C11.6209 6.99756 12.2265 7.19015 12.7334 7.5488C13.2403 7.90744 13.6234 8.41448 13.83 9.00001H15C15.2652 9.00001 15.5196 9.10537 15.7071 9.2929C15.8946 9.48044 16 9.73479 16 10C16 10.2652 15.8946 10.5196 15.7071 10.7071C15.5196 10.8947 15.2652 11 15 11H13.83C13.6234 11.5855 13.2403 12.0926 12.7334 12.4512C12.2265 12.8099 11.6209 13.0025 11 13.0025C10.3791 13.0025 9.77346 12.8099 9.2666 12.4512C8.75974 12.0926 8.3766 11.5855 8.17 11H1C0.734784 11 0.48043 10.8947 0.292893 10.7071C0.105357 10.5196 0 10.2652 0 10C0 9.73479 0.105357 9.48044 0.292893 9.2929C0.48043 9.10537 0.734784 9.00001 1 9.00001H8.17ZM5 15C4.73478 15 4.48043 15.1054 4.29289 15.2929C4.10536 15.4804 4 15.7348 4 16C4 16.2652 4.10536 16.5196 4.29289 16.7071C4.48043 16.8947 4.73478 17 5 17C5.26522 17 5.51957 16.8947 5.70711 16.7071C5.89464 16.5196 6 16.2652 6 16C6 15.7348 5.89464 15.4804 5.70711 15.2929C5.51957 15.1054 5.26522 15 5 15ZM2.17 15C2.3766 14.4145 2.75974 13.9074 3.2666 13.5488C3.77346 13.1902 4.37909 12.9976 5 12.9976C5.62091 12.9976 6.22654 13.1902 6.7334 13.5488C7.24026 13.9074 7.6234 14.4145 7.83 15H15C15.2652 15 15.5196 15.1054 15.7071 15.2929C15.8946 15.4804 16 15.7348 16 16C16 16.2652 15.8946 16.5196 15.7071 16.7071C15.5196 16.8947 15.2652 17 15 17H7.83C7.6234 17.5855 7.24026 18.0926 6.7334 18.4512C6.22654 18.8099 5.62091 19.0025 5 19.0025C4.37909 19.0025 3.77346 18.8099 3.2666 18.4512C2.75974 18.0926 2.3766 17.5855 2.17 17H1C0.734784 17 0.48043 16.8947 0.292893 16.7071C0.105357 16.5196 0 16.2652 0 16C0 15.7348 0.105357 15.4804 0.292893 15.2929C0.48043 15.1054 0.734784 15 1 15H2.17Z"
                fill="#666666"
              />
            </svg>
          </div>
        </div>
        <div className=" mt-3">
          <TaskCard />
        </div>
      </div>
    </div>
  );
};

export default Home;
