import { useState } from "react";
import { useSelector } from "react-redux";
import { WorldGeo } from "./components/world-geo";

import NetflixSvg from "@/assets/svg/anti-forensics-forwarding/Netflix.svg?react";
import NetflixActiveSvg from "@/assets/svg/anti-forensics-forwarding/NetflixActive.svg?react";
import SpotifySvg from "@/assets/svg/anti-forensics-forwarding/Spotify.svg?react";
import SpotifyActiveSvg from "@/assets/svg/anti-forensics-forwarding/SpotifyActive.svg?react";
import InstagramSvg from "@/assets/svg/anti-forensics-forwarding/Instagram.svg?react";
import InstagramActiveSvg from "@/assets/svg/anti-forensics-forwarding/InstagramActive.svg?react";
import TelegramSvg from "@/assets/svg/anti-forensics-forwarding/Telegram.svg?react";
import TelegramActiveSvg from "@/assets/svg/anti-forensics-forwarding/TelegramActive.svg?react";
import GoogleSvg from "@/assets/svg/anti-forensics-forwarding/Google.svg?react";
import GoogleActiveSvg from "@/assets/svg/anti-forensics-forwarding/GoogleActive.svg?react";
import GmailSvg from "@/assets/svg/anti-forensics-forwarding/Gmail.svg?react";
import GmailActiveSvg from "@/assets/svg/anti-forensics-forwarding/GmailActive.svg?react";
import AmazonSvg from "@/assets/svg/anti-forensics-forwarding/Amazon.svg?react";
import AmazonActiveSvg from "@/assets/svg/anti-forensics-forwarding/AmazonActive.svg?react";
import EbaySvg from "@/assets/svg/anti-forensics-forwarding/Ebay.svg?react";
import EbayActiveSvg from "@/assets/svg/anti-forensics-forwarding/EbayActive.svg?react";
import AppleNewsSvg from "@/assets/svg/anti-forensics-forwarding/AppleNews.svg?react";
import AppleNewsActiveSvg from "@/assets/svg/anti-forensics-forwarding/AppleNewsActive.svg?react";
import CNNSvg from "@/assets/svg/anti-forensics-forwarding/CNN.svg?react";
import CNNActiveSvg from "@/assets/svg/anti-forensics-forwarding/CNNActive.svg?react";
import BrowserSvg from "@/assets/svg/anti-forensics-forwarding/Browser.svg?react";
import BrowserActiveSvg from "@/assets/svg/anti-forensics-forwarding/BrowserActive.svg?react";
import YouTubeSvg from "@/assets/svg/anti-forensics-forwarding/YouTube.svg?react";
import YouTubeActiveSvg from "@/assets/svg/anti-forensics-forwarding/YouTubeActive.svg?react";
import FacebookSvg from "@/assets/svg/anti-forensics-forwarding/Facebook.svg?react";
import FacebookActiveSvg from "@/assets/svg/anti-forensics-forwarding/FacebookActive.svg?react";
import { RootState } from "@/store";

import {
  TRAFFIC_OBFUSCATION,
  NESTED_ENCRYPTION,
  DYNAMIC_ROUTE_GENERATOR,
  APP_DIVERSION,
  PASS_AUTHENTICATION,
} from "./data/mockData";

import "./index.scss";
import { App } from "antd";

export const DIALOGTYPE = {
  ADDNode: {
    title: "添加节点",
    desc: "",
    successText: "添加",
  },
  AddNetwork: {
    title: "构建网络",
    desc: "",
    successText: "构建",
  },
};

export const NODEDIALOGTYPE = {
  ClearFailNode: {
    title: "清除掉线节点",
    desc: "",
    successText: "清除",
  },
  ClearWargingNode: {
    title: "恶意节点",
    desc: "",
    successText: "清除",
  },
};

export const Apps = [
  {
    name: "Netflix",
    icon: NetflixSvg,
    activeIcon: NetflixActiveSvg,
  },
  {
    name: "Spotify",
    icon: SpotifySvg,
    activeIcon: SpotifyActiveSvg,
  },
  {
    name: "Instagram",
    icon: InstagramSvg,
    activeIcon: InstagramActiveSvg,
  },
  {
    name: "Telegram",
    icon: TelegramSvg,
    activeIcon: TelegramActiveSvg,
  },
  {
    name: "Google",
    icon: GoogleSvg,
    activeIcon: GoogleActiveSvg,
  },
  {
    name: "Gmail",
    icon: GmailSvg,
    activeIcon: GmailActiveSvg,
  },
  {
    name: "Amazon",
    icon: AmazonSvg,
    activeIcon: AmazonActiveSvg,
  },
  {
    name: "Ebay",
    icon: EbaySvg,
    activeIcon: EbayActiveSvg,
  },
  {
    name: "AppleNews",
    icon: AppleNewsSvg,
    activeIcon: AppleNewsActiveSvg,
  },
  {
    name: "CNN",
    icon: CNNSvg,
    activeIcon: CNNActiveSvg,
  },
  {
    name: "Browser",
    icon: BrowserSvg,
    activeIcon: BrowserActiveSvg,
  },
  {
    name: "YouTube",
    icon: YouTubeSvg,
    activeIcon: YouTubeActiveSvg,
  },
  {
    name: "Facebook",
    icon: FacebookSvg,
    activeIcon: FacebookActiveSvg,
  },
];

export const CONST_TOOLTIP_TYPE = {
  NESTED_ENCRYPTION: {
    type: "NESTED_ENCRYPTION",
    title: "嵌套加密",
  },
  TRAFFIC_OBFUSCATION: {
    type: "TRAFFIC_OBFUSCATION",
    title: "流量混淆",
  },
  DYNAMIC_ROUTE_GENERATOR: {
    type: "DYNAMIC_ROUTE_GENERATOR",
    title: "动态路由生成",
  },
  // 应用分流
  APP_DIVERSION: {
    type: "APP_DIVERSION",
    title: "应用分流",
  },
  // 通行认证
  PASS_AUTHENTICATION: {
    type: "PASS_AUTHENTICATION",
    title: "通行认证",
  },
};

const DecentralizedElasticNetwork = () => {
  const { proxy_info, path_list, newHomeProxies } = useSelector(
    (state: RootState) => state.web3Reducer
  );

  const [tooltipType, setTooltipType] = useState(
    CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type
  );
  const [tooltipClosed, setTooltipClosed] = useState(false);

  const [selectedApp, setSelectedApp] = useState<any>(null);
  const appDiversion = useMemo(() => {
    return Apps.map((item) => {
      const findApp = APP_DIVERSION.find(
        (appItem) => item.name === appItem.name
      );
      return {
        ...item,
        ...findApp,
      };
    });
  }, []);
  const currentValue = useMemo(() => {
    let value = null;
    switch (tooltipType) {
      case CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type:
        value = [NESTED_ENCRYPTION];
        break;
      case CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type:
        value = [TRAFFIC_OBFUSCATION];
        break;
      case CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type:
        value = DYNAMIC_ROUTE_GENERATOR
        break;
      case CONST_TOOLTIP_TYPE.APP_DIVERSION.type:
        value = selectedApp ? [selectedApp] : []
        break;
      case CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type:
        value = [PASS_AUTHENTICATION]
        break;
      default:
        break;
    }
    return value;
  }, [tooltipType,selectedApp]);

  const handleClickApp = (item: any) => {
    console.log("item", item);
    setSelectedApp(item);
  };


  useEffect(()=>{
    ()=>{
        setTooltipClosed(false);
    }
  },[])

  return (
    <div className="decentralized w-full h-full flex flex-col  relative">
      <div className="flex items-center gap-[60px] absolute top-12 left-12 z-10">
        {tooltipType === CONST_TOOLTIP_TYPE.APP_DIVERSION.type &&  appDiversion.map((item) => {
          return (
            <div
              key={item.name}
              className="flex items-center justify-center w-16 h-16 relative  rounded-[4.95px] shadow-[0px_0px_3.299999952316284px_0px_rgba(84,87,255,1.00)] outline outline-[0.50px] outline-offset-[-0.50px] outline-indigo-50/60 overflow-hidden"
              onClick={() => handleClickApp(item)}
            >
              {selectedApp?.name === item?.name ? (
                <item.activeIcon />
              ) : (
                <item.icon />
              )}
            </div>
          );
        })}
      </div>
      <div className="mt-2 w-full h-full flex-1">
        <WorldGeo
          currentValue={currentValue}
          newHomeProxies={newHomeProxies}
          selectedApp={selectedApp}
          tooltipType={tooltipType}
          tooltipClosed={tooltipClosed}
          setTooltipClosed={setTooltipClosed}
        />
      </div>
      <div className="absolute bottom-6 left-[50%] translate-x-[-50%] w-[calc(100%-51px)] p-6 bg-indigo-950 bg-opacity-10 rounded-md outline outline-1 outline-zinc-200 outline-opacity-40 backdrop-blur-lg inline-flex justify-start items-center gap-4">
        <div
          className="bt1 cursor-pointer"
          onClick={() => {
            setTooltipType(CONST_TOOLTIP_TYPE.PASS_AUTHENTICATION.type);
          }}
        >
          通行认证
        </div>

        <div
          className="bt1 cursor-pointer"
          onClick={() => {
            setTooltipType(CONST_TOOLTIP_TYPE.NESTED_ENCRYPTION.type);
            setTooltipClosed(true);
          }}
        >
          嵌套加密
        </div>
        <div
          className="bt1 cursor-pointer"
          onClick={() => {
            setTooltipType(CONST_TOOLTIP_TYPE.DYNAMIC_ROUTE_GENERATOR.type);
          }}
        >
          动态路由生成
        </div>
        <div
          className="bt1 cursor-pointer"
          onClick={() => {
            setTooltipType(CONST_TOOLTIP_TYPE.TRAFFIC_OBFUSCATION.type);
            setTooltipClosed(true);
          }}
        >
          流量混淆
        </div>
        <div
          className="bt1 cursor-pointer"
          onClick={() => {
            setTooltipType(CONST_TOOLTIP_TYPE.APP_DIVERSION.type);
          }}
        >
          应用分流
        </div>
      </div>
    </div>
  );
};

export default DecentralizedElasticNetwork;