import {
    useEffect,
    useState,
    type FC
} from "react";
import type IThemeSwitcherProps from "./type";
import type {
    ThemeSwitchVariants
} from "./type";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type {
    NCoreUIKitIcon
} from "../../types";
import {
    Moon as MoonIcon,
    Sun as SunIcon
} from "lucide-react-native";
import HighlightButton from "../highlightButton";
import Button from "../button";

const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
    variants: variantsProps = [],
    isWorkWithHighlightButton,
    isWorkWithNextShowSystem,
    customBorderColor,
    customColor,
    customTheme,
    color,
    style,
    ...props
}) => {
    const {
        activeTheme,
        themeKeys,
        colors
    } = NCoreUIKitTheme.useContext(customTheme);

    const [
        currentIndex,
        setCurrentIndex
    ] = useState(themeKeys.findIndex(t => t === activeTheme));

    useEffect(() => {
        const cI = themeKeys.findIndex(tI => tI === activeTheme);

        const nextCI = isWorkWithNextShowSystem ? cI + 1 > themeKeys.length - 1 ? 0 : cI + 1 : cI;

        if(currentIndex !== nextCI) {
            setCurrentIndex(nextCI);
        }
    }, [
        activeTheme
    ]);

    const variantsPre: Array<Omit<ThemeSwitchVariants[0], "backgroundColor"> & {
        backgroundColor?: ThemeSwitchVariants[0]["backgroundColor"]
    }> = variantsProps;

    const isHaveLight = variantsProps.findIndex(iV => iV.themeKey === "light") !== -1;
    const isHaveDark = variantsProps.findIndex(iV => iV.themeKey === "dark") !== -1;

    if(!isHaveDark) {
        variantsPre.unshift({
            icon: ({
                customColor,
                color,
                size
            }) => {
                const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;

                return <MoonIcon
                    color={customColor ? colors.project[_customColor] ? colors.project[_customColor] : customColor : colors.content.icon[color]}
                    size={size + 5}
                />;
            },
            backgroundColor: isWorkWithHighlightButton ? undefined : "subtle",
            borderColor: "transparent",
            iconColor: "moon",
            themeKey: "dark"
        });
    }

    if(!isHaveLight) {
        variantsPre.unshift({
            icon: ({
                customColor,
                color,
                size
            }) => {
                const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;

                return <SunIcon
                    color={customColor ? colors.project[_customColor] ? colors.project[_customColor] : customColor : colors.content.icon[color]}
                    size={size + 5}
                />;
            },
            backgroundColor: isWorkWithHighlightButton ? undefined : "subtle",
            borderColor: "transparent",
            themeKey: "light",
            iconColor: "sun"
        });
    }

    const variants = [
        ...variantsPre
    ].sort((a, b) => {
        const indexA = themeKeys.indexOf(a.themeKey);
        const indexB = themeKeys.indexOf(b.themeKey);

        if (indexA === -1 && indexB !== -1) return 1;

        if (indexB === -1 && indexA !== -1) return -1;

        if (indexA === -1 && indexB === -1) {
            return a.themeKey.localeCompare(b.themeKey);
        }

        return indexA - indexB;
    });

    const currentVariantIndex = variants.findIndex(e => e.themeKey === activeTheme);

    if(currentVariantIndex === -1) {
        return null;
    }

    const nextVariantIndex = currentVariantIndex + 1;
    const viewVariantIndex = nextVariantIndex > variants.length - 1 ? 0 : nextVariantIndex;

    const currentVariant = variants[isWorkWithNextShowSystem ? viewVariantIndex : currentVariantIndex];

    const allProps = {
        ...props,
        icon: ({
            color,
            size
        }: {
            color: keyof NCoreUIKit.IconContentColors;
            size: number;
        }) => {
            const Icon = currentVariant?.icon as NCoreUIKitIcon;

            return <Icon
                customColor={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined}
                color={color}
                size={size}
            />;
        },
        customBorderColor: customBorderColor || (currentVariant && currentVariant.borderColor ?
            currentVariant.borderColor
            :
            color),
        customColor: customColor || (currentVariant && currentVariant.backgroundColor ?
            currentVariant.backgroundColor
            :
            color),
        onPress: () => {
            NCoreUIKitTheme.switch({
                themeKey: themeKeys[viewVariantIndex]
            });
        },
        style: [
            style
        ]
    };

    if(isWorkWithHighlightButton) {
        return <HighlightButton
            {...allProps}
        />;
    }

    return <Button
        {...allProps}
    />;
};
export default ThemeSwitcher;
