import { Popup } from "@/components/Popup";
import clsx from "clsx";
import React, { ReactNode } from "react";

export interface NetworkOption {
  id: number;
  name: string;
  logo: string | ReactNode | JSX.Element;
  onClick?: (networkOption?: NetworkOption, index?: number) => Promise<void>;
}

interface PropsType {
  opened: boolean;
  networkOptions: NetworkOption[];
  selectedNetwork?: NetworkOption;
  onClose: () => void;
  onBack?: () => void;
  back?: boolean;
  fixed?: boolean;
}

const NetworkPopup: React.FC<PropsType> = ({
  opened,
  networkOptions,
  selectedNetwork,
  onClose,
  onBack = () => {},
  back,
  fixed,
}) => {
  return (
    <Popup
      fixed={fixed}
      opened={opened}
      title="Switch network"
      onClose={onClose}
      onBack={onBack}
      close
      back={back}
    >
      <div className="uikit-flex uikit-flex-col uikit-h-96 uikit-overflow-y-auto uikit-gap-2 uikit-px-5 uikit-py-2 uikit-popup-enable-scroll">
        {networkOptions.map((networkOption, index) => {
          const { id, name, logo, onClick } = networkOption;
          const isActive =
            selectedNetwork?.id === id && selectedNetwork?.name === name;
          return (
            <div
              key={`network_${index}`}
              className={clsx(
                "uikit-flex uikit-flex-row uikit-p-4 uikit-gap-2 uikit-cursor-pointer uikit-networkOptions-center uikit-transition-colors uikit-rounded-lg uikit-border uikit-border-border uikit-border-solid hover:uikit-opacity-70",
                {
                  "uikit-bg-blue-100 dark:uikit-bg-blue-900": isActive,
                  "hover:uikit-bg-blue-50 dark:hover:uikit-bg-blue-800":
                    !isActive,
                },
              )}
              onClick={async () => {
                await onClick?.(networkOption, index);
                onClose();
              }}
            >
              {typeof logo === "string" ? (
                <img
                  src={logo}
                  alt={name}
                  className="uikit-w-8 uikit-h-8 uikit-rounded-full"
                />
              ) : (
                logo
              )}

              <span className="uikit-flex-1 uikit-text-lg uikit-font-medium uikit-flex uikit-items-center">
                {name}
              </span>
              {isActive && <Selected />}
            </div>
          );
        })}
      </div>
    </Popup>
  );
};

export default NetworkPopup;

const Selected = (props: React.SVGProps<SVGSVGElement>) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      {...props}
    >
      <path
        d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM11.0026 16L18.0737 8.92893L16.6595 7.51472L11.0026 13.1716L8.17421 10.3431L6.75999 11.7574L11.0026 16Z"
        fill="var(--uikit-colors-primary)"
      />
    </svg>
  );
};