SGPT/src/shared/components/home/TokenomicsSection.tsx

import { useSpring, animated } from "@react-spring/web";
import { useEffect, useState } from "react";
import { Pie } from "react-chartjs-2";
import "chart.js/auto";
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip,
  Legend,
  ChartData,
} from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Context } from "chartjs-plugin-datalabels";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
import "../css/TokenomicsSection.css";
import "animate.css";
import { useTranslation } from "react-i18next";
type Props = {};
ChartJS.register(ArcElement, Tooltip, Legend);
const tokenomics = [
  {
    name: "Ecosystem Growth",
    title:
      "4 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from year 2.",
    precent: "20",
    description: " ",
    color: "#86eae9",
    bgcolor: "bg-[#86eae9]",
  },
  {
    name: "Community",
    title:
      "4 years vesting, 30% at TGE (Token Generation Event), then locked for 1 year and unlocked every block from the 2nd year.",
    precent: "20",
    description: " ",
    color: "#5dbdd3",
    bgcolor: "bg-[#5dbdd3]",
  },
  {
    name: "Team",
    title:
      "4 years vesting, 1 year course, and lock pattern are in each block from the 2nd year.",
    precent: "18",
    description: " ",
    color: "#4591b8",
    bgcolor: "bg-[#4591b8]",
  },
  {
    name: "Strategic Sale",
    title:
      "2 years vesting, 1 year course, and lock pattern are all block by block from 2nd year.",
    precent: "15",
    description: " ",
    color: "#353c6e",
    bgcolor: "bg-[#353c6e]",
  },
  {
    name: "Treasury",
    title:
      "4 years vesting, 10% release at TGE, 1 year lock and unlock in each block from the 2nd year.",
    precent: "12",
    description: " ",
    color: "#705788",
    bgcolor: "bg-[#705788]",
  },
  {
    name: "Seed Sale",
    title:
      "3 years vesting, 1 year lock and unlock in each block from the 2nd year.",
    precent: "5",
    description: " ",
    color: "#a5769e",
    bgcolor: "bg-[#a5769e]",
  },
  {
    name: "Binance Launchpad Sale",
    title: "100% key at TGE.",
    precent: "5",
    description: "vxcvdvsdfsdf ",
    color: "#d59ab3",
    bgcolor: "bg-[#d59ab3]",
  },
  {
    name: "Advisor",
    title:
      "3 years vesting, 1 year lock, and lock pattern are all block by block from 2nd year.",
    precent: "5",
    description: " ",
    color: "#705788",
    bgcolor: "bg-[#705788]",
  },
];
const TokenomicsSection = (props: Props) => {
  const { t } = useTranslation("tokenomicHome");
  const [isVisible, setIsVisible] = useState(false);
  const [tokenomicData, setTokenomicData] = useState([]);
  useEffect(() => {
    setTokenomicData(t("array", { returnObjects: true }));
    const section = document.getElementById("tokenomics");
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold: 0.2 }
    );

    if (!section) {
      return;
    }
    observer.observe(section);

    return () => {
      observer.unobserve(section);
    };
  }, [t]);

  useEffect(() => {
    console.log("isVisible", isVisible);
  }, [isVisible]);

  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    transform: isVisible ? "scaleX(1)" : "scaleX(0.5)",
    config: {
      duration: 300,
    },
  });

  const plugins = {
    id: "textCenter",
    datalabels: {},
  };
  const [userData, setUserData] = useState({
    labels: tokenomics.map((data) => data.name),
    datasets: [
      {
        label: "text",
        data: tokenomics.map((data) => data.precent),
        backgroundColor: tokenomics.map((data) => data.color),
        borderWidth: 1,
        datalabels: {
          font: {
            weight: "bold",
          },
          anchor: "center",
          rotation: function (ctx: any) {
            const valuesBefore = ctx.dataset.data
              .slice(0, ctx.dataIndex)
              .reduce(
                (a: number, b: number) => Number(a) + Number(b),
                1 as number
              );
            const sum = ctx.dataset.data.reduce(
              (a: number, b: number) => Number(a) + Number(b),
              1 as number
            );
            const rotation =
              ((valuesBefore + ctx.dataset.data[ctx.dataIndex] / 2) / sum) *
              360;
            return rotation < 180 ? rotation - 95 : rotation + 90;
          },
          align: "center",
          offset: -30,
        },
      },
    ],
  });
  const options = {
    layout: {},
    hoverBorderWidth: 4,
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        font: {
          size:
            window.innerWidth > 1024 ? 20 : window.innerWidth > 768 ? 16 : 10,
        },

        color: "#fff",
        formatter: (context: any, args: any) => {
          const index = args.dataIndex;
          return args.chart.data.labels[index];
        },
      },
      tooltip: {
        callbacks: {
          label: (context: any) => {
            const dataIndex = context.dataIndex;
            const title = tokenomics[dataIndex].title;
            const words = title.split(" "); // Split by space
            const groupedLabels = [];

            for (let i = 0; i < words.length; i += 10) {
              const group = words.slice(i, i + 10).join(" ");
              groupedLabels.push(group);
            }

            return groupedLabels;
          },
        },
        displayColors: false,
      },
    },
  };

  ChartJS.register(ChartDataLabels);
  return (
    <div className="w-full pb-24 scroll-mt-16" id="tokenomics">
      <div className="container w-[94%] mx-auto">
        <h1 className="text-4xl text-white font-bold text-center mb-12  hover:text-orange-400">
          Tokenomics
        </h1>
        <div className="w-full flex justify-center items-center lg:justify-between lg:flex-row flex-wrap  gap-10">
          <div className="w-full  flex justify-center">
            <animated.div
              style={{ ...styles }}
              className="w-[300px] sm:w-[350px] md:w-[500px]  lg:w-[550px]"
            >
              <Pie
                data={userData as any}
                plugins={[plugins]}
                options={options}
              />
            </animated.div>
          </div>
          {/* <div className="w-full lg:w-[45%] justify-center">
            <animated.li style={{ ...styles }} className={``}>
              <h2 className="text-white text-center font-bold text-xl pb-4 md:pb-6  lg:pb-8">
                {t("heading")}
              </h2>
              <ul className="flex flex-col items-end justify-center w-3/4 md:w-full h-full gap-8 px-3 mx-auto">
                {tokenomicData.map((item: any, index) => {
                  return (
                    <div
                      key={index + 1}
                      className="w-full relative text-center  border-2 border-[#06B6D4] text-white py-3  animate__backInDown rounded-lg px-4"
                    >
                      <h4 className="text-xl font-bold">{item?.title}</h4>
                      <p>{item?.description}</p>
                      {index < tokenomicData.length - 1 && (
                        <div className="absolute bottom-[-24px] left-1/2 translate-x-[-50%] h-3 w-3 bg-[#06B6D4] border-2 border-white rounded-[50%]"></div>
                      )}
                    </div>
                  );
                })}
              </ul>
            </animated.li>
          </div> */}
        </div>
      </div>
    </div>
  );
};

export default TokenomicsSection;