import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import Border from "./Border";
import Stack from "../layout/Stack";
import Row from "../layout/Row";
import Span from "../layout/Span";

export type TWUITabsObject = {
    title: string;
    value: string;
    content: React.ReactNode;
    defaultActive?: boolean;
};

export type TWUI_TOGGLE_PROPS = React.ComponentProps<typeof Stack> & {
    tabsContentArray: TWUITabsObject[];
    tabsBorderProps?: React.ComponentProps<typeof Border>;
    tabsButtonsWrapperProps?: React.DetailedHTMLProps<
        React.HTMLAttributes<HTMLDivElement>,
        HTMLDivElement
    >;
    centered?: boolean;
    debounce?: number;
};

/**
 * # Tabs Component
 * @className twui-tabs-wrapper
 * @className twui-tab-buttons
 * @className twui-tab-button-active
 * @className twui-tab-buttons-wrapper
 */
export default function Tabs({
    tabsContentArray,
    tabsBorderProps,
    tabsButtonsWrapperProps,
    centered,
    debounce = 100,
    ...props
}: TWUI_TOGGLE_PROPS) {
    const values = tabsContentArray.map((obj) => obj.value);

    const [activeValue, setActiveValue] = React.useState(
        tabsContentArray.find((ctn) => ctn.defaultActive)?.value ||
            values[0] ||
            undefined
    );

    const targetContent = tabsContentArray.find(
        (ctn) => ctn.value == activeValue
    );

    return (
        <Stack
            {...props}
            className={twMerge("w-full", "twui-tabs-wrapper", props.className)}
        >
            <div
                {...tabsButtonsWrapperProps}
                className={twMerge(
                    "w-full",
                    "twui-tab-buttons-wrapper",
                    tabsButtonsWrapperProps?.className
                )}
            >
                <Border className="p-0 w-full" {...tabsBorderProps}>
                    <Row
                        className={twMerge(
                            "gap-0 items-stretch w-full",
                            centered && "justify-center"
                        )}
                    >
                        {values.map((value, index) => {
                            const targetObject = tabsContentArray.find(
                                (ctn) => ctn.value == value
                            );

                            const isActive = value == activeValue;

                            return (
                                <span
                                    className={twMerge(
                                        "px-6 py-2 rounded -ml-[1px]",
                                        isActive
                                            ? "bg-blue-500 text-white outline-none twui-tab-button-active"
                                            : "text-slate-400 dark:text-white/40 hover:text-slate-800 dark:hover:text-white" +
                                                  " cursor-pointer",
                                        "twui-tab-buttons"
                                    )}
                                    onClick={() => {
                                        setActiveValue(undefined);
                                        setTimeout(() => {
                                            setActiveValue(value);
                                        }, debounce);
                                    }}
                                    key={index}
                                >
                                    {targetObject?.title}
                                </span>
                            );
                        })}
                    </Row>
                </Border>
            </div>
            {targetContent?.content}
        </Stack>
    );
}