import {
    useEffect,
    useState,
    type FC
} from "react";
import type ILocaleSwitcherProps from "./type";
import type {
    LocaleSwitchVariants
} from "./type";
import {
    NCoreUIKitLocalize
} from "../../core/hooks";
import type {
    NCoreUIKitIcon
} from "../../types";
import {
    EnUsIcon,
    TRTRIcon
} from "../../assets/svg";
import HighlightButton from "../highlightButton";
import Button from "../button";

const LocaleSwitcher: FC<ILocaleSwitcherProps> = ({
    variants: variantsProps = [],
    isWorkWithHighlightButton,
    isWorkWithNextShowSystem,
    customBorderColor,
    customLocalize,
    customColor,
    color,
    style,
    ...props
}) => {
    const {
        activeLocale,
        localeKeys
    } = NCoreUIKitLocalize.useContext(customLocalize);

    const [
        currentIndex,
        setCurrentIndex
    ] = useState(localeKeys.findIndex(t => t === activeLocale));

    useEffect(() => {
        const cI = localeKeys.findIndex(tI => tI === activeLocale);

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

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

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

    const isHaveNCTRTR = variantsProps.findIndex(iV => iV.localeKey === "tr-TR") !== -1;
    const isHaveNCENUS = variantsProps.findIndex(iV => iV.localeKey === "en-US") !== -1;

    if(!isHaveNCTRTR) {
        variantsPre.unshift({
            backgroundColor: isWorkWithHighlightButton ? undefined : "subtle",
            borderColor: "transparent",
            icon: ({
                size
            }) => {
                return <TRTRIcon
                    size={size + 5}
                />;
            },
            iconColor: "turkish",
            localeKey: "tr-TR"
        });
    }

    if(!isHaveNCENUS) {
        variantsPre.unshift({
            backgroundColor: isWorkWithHighlightButton ? undefined : "subtle",
            borderColor: "transparent",
            icon: ({
                size
            }) => {
                return <EnUsIcon
                    size={size + 5}
                />;
            },
            iconColor: "english",
            localeKey: "en-US"
        });
    }

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

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

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

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

        return indexA - indexB;
    });

    const currentVariantIndex = variants.findIndex(e => e.localeKey === activeLocale);

    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: () => {
            NCoreUIKitLocalize.switch({
                localeKey: localeKeys[viewVariantIndex] as keyof NCoreUIKit.LocaleKey
            });
        },
        style: [
            style
        ]
    };

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

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