import * as React from "react";
const { useState, useRef, useEffect } = React;
import { ChevronDown } from "lucide-react";
import { useWallet } from "../WalletProvider";
import { borderRadiusStyles } from "../../types/theme";

interface AmountDropdownProps {
  onSelectPercentage: (percentage: number) => void;
  disabled?: boolean;
}

export const AmountDropdown: React.FC<AmountDropdownProps> = ({
  onSelectPercentage,
  disabled = false,
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [selectedLabel, setSelectedLabel] = useState("Presets");
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { currentTheme, walletCornerRadius } = useWallet();
  const currentRadius = borderRadiusStyles[walletCornerRadius];

  const options = [
    { label: "25%", value: 25 },
    { label: "50%", value: 50 },
    // { label: "Send 75%", value: 75 },
    { label: "Max", value: 100 },
  ];

  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (
        dropdownRef.current &&
        !dropdownRef.current.contains(event.target as Node)
      ) {
        setIsOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  const handleOptionClick = (option: { label: string; value: number }) => {
    setSelectedLabel(option.label);
    setIsOpen(false);
    onSelectPercentage(option.value);
  };

  return (
    <div ref={dropdownRef} style={{ position: "relative" }}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        disabled={disabled}
        style={{
          background: currentTheme.surface,
          border: `1px solid ${currentTheme.border}`,
          borderTopRightRadius: currentRadius.level3Radius,
          borderBottomRightRadius: currentRadius.level3Radius,
          padding: "7px 10px",
          fontSize: 12,
          color: currentTheme.text,
          cursor: disabled ? "not-allowed" : "pointer",
          fontWeight: 500,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 4,
          minWidth: 60,
          opacity: disabled ? 0.5 : 1,
        }}
      >
        <span style={{ fontSize: 12, color: currentTheme.primary }}>
          {selectedLabel}
        </span>
        <ChevronDown
          style={{
            width: 12,
            height: 12,
            color: currentTheme.primary,
            transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
            transition: "transform 0.2s ease",
          }}
        />
      </button>

      {isOpen && (
        <div
          style={{
            position: "absolute",
            top: "100%",
            left: 0,
            right: 0,
            marginTop: 4,
            background: currentTheme.surface,
            border: `1px solid ${currentTheme.border}`,
            borderRadius: currentRadius.level3Radius,
            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
            zIndex: 1000,
            overflow: "hidden",
            padding: 4,
            minWidth: 80,
          }}
        >
          {options.map((option, index) => (
            <button
              key={option.value}
              onClick={() => handleOptionClick(option)}
              style={{
                width: "100%",
                padding: "8px 12px",
                fontSize: 11,
                color: currentTheme.text,
                background: "transparent",
                border: "none",
                cursor: "pointer",
                textAlign: "left",
                outline: "none",
                fontWeight: 500,
                borderRadius: currentRadius.level3Radius,
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = currentTheme.surfaceHover;
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = "transparent";
              }}
            >
              {option.label}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};