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 Button from "../button";

const ThemeSwitcher: FC<IThemeSwitcherProps> = ({
    variants: variantsProps = [],
    isWorkWithNextShowSystem,
    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: ThemeSwitchVariants = variantsProps;

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

    if(!isHaveDark) {
        variantsPre.unshift({
            borderColor: "transparent",
            backgroundColor: "subtle",
            iconColor: "moon",
            themeKey: "dark",
            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}
                />;
            }
        });
    }

    if(!isHaveLight) {
        variantsPre.unshift({
            borderColor: "transparent",
            backgroundColor: "subtle",
            themeKey: "light",
            iconColor: "sun",
            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}
                />;
            }
        });
    }

    const variants = [...variantsPre].sort((a, b) => {
        return themeKeys.indexOf(a.themeKey) - themeKeys.indexOf(b.themeKey);
    });

    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];

    return <Button
        {...props}
        customBorderColor={currentVariant && currentVariant.borderColor ?
            currentVariant.borderColor
            :
            color
        }
        customColor={currentVariant && currentVariant.backgroundColor ?
            currentVariant.backgroundColor
            :
            color
        }
        icon={({
            color,
            size
        }) => {
            const Icon = currentVariant?.icon as NCoreUIKitIcon;

            return <Icon
                customColor={currentVariant && currentVariant.iconColor ? currentVariant.iconColor : undefined}
                color={color}
                size={size}
            />;
        }}
        onPress={() => {
            NCoreUIKitTheme.switch({
                themeKey: themeKeys[viewVariantIndex]
            });
        }}
        style={[
            style
        ]}
    />;
};
export default ThemeSwitcher;
