import { AnimatePresence, motion } from "motion/react";
import { useRef, useState } from "react";

type TabValue = "free" | "monthly" | "yearly";



const DEFAULT_THEME = {
  selectedBgColor: "black",
  unselectedColor: "var(--color-gray-200)",
  nestedSelectedBgColor: "white",
  nestedSelectedColor: "black",
  nestedColor: "white",
  selectedColor: "white",
  baseBgColor: "var(--color-gray-50)",
  borderColor: "var(--color-gray-200)",
};

const Tab = (props: {
  value: TabValue;
  onChange: (value: TabValue) => void;
  theme?: {
    selectedBgColor: string;
    unselectedColor: string;
    nestedSelectedBgColor: string;
    nestedSelectedColor: string;
    nestedColor: string;
    selectedColor: string;
    baseBgColor: string;
    borderColor: string;
  };
}) => {
  const { value, onChange, theme = DEFAULT_THEME } = props;
  const selectedTab = value === "free" ? "free" : "premium";
  const refMonthly = useRef<HTMLDivElement>(null);
  const refYearly = useRef<HTMLDivElement>(null);

  return (
    <div
      className="relative flex flex-row justify-between w-full rounded-full h-full bg-[var(--base-bg-color)] shadow-lg border border-[var(--border-color)]"
      style={{
        "--base-bg-color": theme.baseBgColor,
        "--selected-bg-color": theme.selectedBgColor,
        "--unselected-color": theme.unselectedColor,
        "--nested-selected-bg-color": theme.nestedSelectedBgColor,
        "--nested-selected-color": theme.nestedSelectedColor,
        "--nested-color": theme.nestedColor,
        "--selected-color": theme.selectedColor,
        "--border-color": theme.borderColor,
      } as React.CSSProperties}
    >
      <motion.div
        className="w-1/2 bg-[var(--selected-bg-color)] absolute top-[2px] bottom-[2px] rounded-full"
        initial={false}
        animate={{
          right: selectedTab === "free" ? "auto" : 2,
          left: selectedTab === "free" ? 2 : "auto",
        }}
        style={{
          zIndex: selectedTab === "free" ? 3 : 1,
        }}
      />
      <div
        className="transition-colors relative text-lg w-1/2 text-[var(--unselected-color)] data-[selected]:text-white text-center leading-10 h-full flex items-center justify-center cursor-pointer"
        data-selected={selectedTab === "free" ? true : undefined}
        onClick={() => onChange("free")}
        style={{
          zIndex: 3,
        }}
      >
        Free
      </div>
      <div
        className="relative p-[.5px] w-1/2 overflow-clip flex flex-col data-[selected]:text-[var(--selected-color)] items-center justify-center"
        data-selected={selectedTab === "premium" ? true : undefined}
      >
        <AnimatePresence>
          <>
            <motion.div
              style={{
                color: selectedTab === "premium" ? "var(--selected-color)" : undefined,
                display: selectedTab === "premium" ? "none" : "flex",
                zIndex: 2,
              }}
              animate={{ opacity: 1, y: selectedTab === "premium" ? 20 : 0, scale: 1, filter: "blur(0px)" }}
              exit={{ opacity: 0, scale: 0, filter: "blur(4px)" }}
              transition={{ duration: 0.15 }}
              className="flex flex-col items-center cursor-pointer w-full text-[var(--unselected-color)]"
              onClick={() => onChange("monthly")}
            >
              Premium
              <motion.div
                className="relative flex flex-row items-center justify-center text-xs"
              >
                <div className="relative w-fit text-[var(--parent-color)] data-[selected]:text-[var(--parent-selected-color)]" data-selected>
                  Monthly
                </div>
                <div className="size-[2px] bg-current rounded-full mx-2" />
                <div className="relative w-fit text-[var(--parent-color)] data-[selected]:text-[var(--parent-selected-color)]">Yearly</div>
              </motion.div>
            </motion.div>

            {selectedTab === "premium" && (
              <motion.div
                className="relative w-full h-[calc(100%-8px)]"
                initial={{ opacity: 0, scale: 0 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.3 }}
                style={{
                  zIndex: 1,
                  pointerEvents: selectedTab === "premium" ? "auto" : "none",
                }}
              >
                <motion.div
                  id="tab-indicator"
                  className="bg-[var(--nested-selected-bg-color)] absolute left-0 w-1/2 h-full top-0 bottom-0 rounded-full"
                  animate={value === "yearly" ? {
                    left: refYearly.current?.offsetLeft,
                    width: refYearly.current?.offsetWidth,
                  } : undefined}
                />
                <div className="relative p-1 text-center text-[var(--nested-selected-color)] w-full h-full min-w-0 flex flex-row items-center justify-between text-base">
                  <div
                    className="transition-colors w-full text-[var(--nested-color)] data-[selected]:text-[var(--nested-selected-color)] cursor-pointer"
                    data-selected={value === "monthly" ? true : undefined}
                    onClick={() => onChange("monthly")}
                    ref={refMonthly}
                  >
                    Monthly
                  </div>
                  <div
                    className="transition-colors w-full text-[var(--nested-color)] data-[selected]:text-[var(--nested-selected-color)] cursor-pointer"
                    data-selected={value === "yearly" ? true : undefined}
                    onClick={() => onChange("yearly")}
                    ref={refYearly}
                  >
                    Yearly
                  </div>
                </div>
              </motion.div>
            )}
          </>
        </AnimatePresence>
      </div>
    </div>
  );
};