"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";
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
import { Doughnut, Pie } from "react-chartjs-2";
import BottomSheetChangeRole from "plugins/BottomSheet/BottomSheetChangeRole";

ChartJS.register(ArcElement, Tooltip, Legend);

export const data = {
  datasets: [
    {
      label: ["پوزیشن"],
      data: [60, 38, 95, 60, 20, 30],
      backgroundColor: [
        "rgba(46, 161, 134, 0.8)",
        "rgba(52, 115, 101, 0.41)",
        "rgba(80, 143, 114, 0.61)",
        "rgba(75, 155, 138, 0.61)",
        "rgba(85, 155, 138, 0.91)",
        "rgba(12, 75, 61, 0.51)",
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)",
      ],
      borderWidth: 1,
      borderColor: " #356859",
    },
  ],
};

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");
    }
  }, []);

  console.log(profile);

  return (
    <div className="pb-20">
      <AppHeader
        title={profile?.user?.firstName + "     " + profile?.user?.lastName}
        sub={profile?.user?.selectedRoleName}
        userIcon={true}
        userIconData={profile?.user?.firstName}
        userRole={profile?.roles}
        iconEvent3={() => CTX.setBottomSheetChangeRoleOpen(true)}
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-5 rtl">
        <div className="    p-2 rounded-xl my-3">
          <div className="m-2">
            <h2 className="mb-0  font-bold text-base">مسیر فرایند شروع</h2>

            <p className="mb-0 text-sm text-gray-600 mt-2">
              شما
              <PersianNumber number={60} style="font-bold mx-1" />
              درصد از فرایند شروع را انجام داده اید
            </p>
          </div>
          <div className=" border-[2px] border-primary-300 opacity-70 p-3 rounded-full z-10 relative"></div>
          <div className="relative flex justify-end">
            <div className=" bg-secondary-100 absolute w-[70%]  p-3 rounded-full mt-[-26px] z-0"></div>
          </div>

          <div className="flex justify-end mt-3">
            <p className="mb-0   w-fit text-sm">ادامه فرایند</p>
            <div>
              {" "}
              <svg
                width="12"
                height="12"
                viewBox="0 0 11 18"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                className=" mt-[3px] mx-1"
              >
                <path d="M10 1L2 9L10 17" stroke="#555555" stroke-width="2" />
              </svg>
            </div>
          </div>
        </div>

        <div className=" rounded-2xl p-3">
          <div className="flex justify-between ">
            <div>
              <div className="flex mt-3">
                <div className="w-[35px] h-[10px] mt-2 bg-primary-300 rounded-full"></div>
                <p className="mb-0 text-sm mx-2"> پوزیشن</p>
              </div>
              <div className="flex mt-3">
                <div className="w-[15px] h-[10px] mt-2 bg-primary-300 rounded-full"></div>
                <p className="mb-0 text-sm mx-2"> سکشن</p>
              </div>
              <div className="flex mt-3">
                <div className="w-[20px] h-[10px] mt-2 bg-primary-300 rounded-full"></div>
                <p className="mb-0 text-sm mx-2"> روتین</p>
              </div>
              <div className="flex mt-3">
                <div className="w-[70px] h-[10px] mt-2 bg-primary-300 rounded-full"></div>
                <p className="mb-0 text-sm mx-2"> یوزر</p>
              </div>
              <div className="flex mt-3">
                <div className="w-[10px] h-[10px] mt-2 bg-primary-300 rounded-full"></div>
                <p className="mb-0 text-sm mx-2"> شبفت</p>
              </div>
            </div>

            <div className="w-[190px]">
              <Doughnut data={data} />
            </div>
          </div>
        </div>
      </div>

      <BottomSheetChangeRole />
    </div>
  );
};

export default Home;