import { clsx } from "clsx";
import { useAppDispatch, useAppSelector } from "@/hooks";
import { UpkQuestionChoice } from "@/api_fsb";
import { useGetMeQuery } from "@/models/authAPI";
import { ChevronRightIcon } from "lucide-react";
import { KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
import { useSelector } from "react-redux";
import { cashoutMethodsSelectors } from "@/models/cashoutMethodsSlice";

const RedemptionHeader = () => {
  const cashout_methods = useSelector(cashoutMethodsSelectors.selectAll);

  return (
    <>
      <h2 className="text-xs font-mono font-bold p-0 m-0">
        {/* {cashout_methods.length} Redemption Methods */}
        30+ Redemption Methods
      </h2>
    </>
  );
};

const RedemptionModalBody = () => {
  return (
    <div className="grid grid-cols-[auto_1fr] text-xs">
      <div className="label text-center p-2">
        Paypal, Visa, Giftcards will be available. Finishing processing the
        transfer from Amazon.
      </div>
    </div>
  );
};

const Redemption = () => {
  const dispatch = useAppDispatch();
  const { data: user, isLoading, isError } = useGetMeQuery();
  const [showRedemption, setShowRedemption] = useState(false);

  return (
    <div
      className={clsx(
        "fixed rounded bg-blue-500 text-white shadow-lg z-60 \
            top-1 sm:top-6  \
            right-1 sm:right-2",
        showRedemption ? "w-[98vw] sm:w-[400px]" : "w-[220px]",
      )}
    >
      <div
        className="bg-blue-600 rounded border-white-300 
            cursor-pointer py-1 px-4
            hover:bg-blue-700 transition-colors duration-200"
        onClick={() => setShowRedemption(!showRedemption)}
      >
        <RedemptionHeader />

        <h4 className="text-[10px] text-center italic text-white-300 py-0">
          {/* (Click to {showRedemption ? "hide" : "show"}) */}
          Details within 24hr.
        </h4>
      </div>

      {showRedemption && <RedemptionModalBody />}
    </div>
  );
};

export default Redemption;