import { ComponentPropsWithRef, ReactNode, useMemo } from 'react';
import { Link, LinkProps } from 'react-router-dom'
import { mgClass } from '@utils/mergeClasses'
import splitText from '@utils/splitText';
import "./Button.scss"

const LINK_TAG = "link";
const ANCHOR_TAG = "anchor";
const DIV_TAG = "div";

type Link = typeof LINK_TAG;
type Anchor = typeof ANCHOR_TAG;
type Div = typeof DIV_TAG;
type Button = "button";

interface ButtonPropsBase {
    $type?: "primary" | "secondary" | "tertiary";
    $style?: "primary" | "secondary" | "tertiary";
    $bgColor?: "red" | "green";
    $element?: Link | Anchor | Div | Button;
    children: ReactNode;
}
type ButtonProps =
    | (ButtonPropsBase & { $element: "link" } & LinkProps)
    | (ButtonPropsBase & { $element: "anchor" } & ComponentPropsWithRef<"a">)
    | (ButtonPropsBase & { $element: "div" } & ComponentPropsWithRef<"div">)
    | (ButtonPropsBase & { $element: "button" } & ComponentPropsWithRef<"button">)
    | (ButtonPropsBase & { $element?: undefined } & ComponentPropsWithRef<"button">)

export default function Button({ $type, $style, $bgColor, $element, children, ...props }: ButtonProps) {

    const buttonClasses = mgClass({
        [`sxs-btn--${$type || "primary"}`]: true,
        [`sxs-btn--style-${$style || "primary"}`]: true,
        [`sxs-btn--style-bg-${$bgColor}`]: $bgColor,
        [props.className!]: props.className
    });

    const memoisedChildren = useMemo(() => splitText(children, { byLetter: true, sliceClassName: "sas-bs" }), [children]);

    return $element === LINK_TAG ? (
        <Link {...props as LinkProps} className={`sxs-btn${buttonClasses ? ` ${buttonClasses}` : ""}`}>
            <div className="sxs-btn__con0">
                <span className="sxs-btn__wv" />
                <div className="sxs-btn__con1">
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                </div>
            </div>
        </Link>
    ) : $element === ANCHOR_TAG ? (
        <a {...props as ComponentPropsWithRef<"a">} className={`sxs-btn${buttonClasses ? ` ${buttonClasses}` : ""}`}>
            <div className="sxs-btn__con0">
                <span className="sxs-btn__wv" />
                <div className="sxs-btn__con1">
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                </div>
            </div>
        </a>
    ) : $element === DIV_TAG ? (
        <div {...props as ComponentPropsWithRef<"div">} className={`sxs-btn${buttonClasses ? ` ${buttonClasses}` : ""}`}>
            <div className="sxs-btn__con0">
                <div className="sxs-btn__con1">
                    <div className='sxs-btn__con2'>{children}</div>
                </div>
            </div>
        </div>
    ) : (
        <button type="button" {...props as ComponentPropsWithRef<"button">} className={`sxs-btn${buttonClasses ? ` ${buttonClasses}` : ""}`}>
            <div className="sxs-btn__con0">
                <span className="sxs-btn__wv" />
                <div className="sxs-btn__con1">
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                    <div className="sxs-btn__con2">{memoisedChildren}</div>
                </div>
            </div>
        </button>
    )
}