ncore-ui-kit/src/components/localeSwitcher/index.tsx

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 Button from "../button";
import {
    EnUsIcon,
    TRTRIcon
} from "../../assets/svg";
import HighlightButton from "../highlightButton";

const PaletteSwitcher: FC<ILocaleSwitcherProps> = ({
    variants: variantsProps = [],
    isWorkWithHighlightButton,
    isWorkWithNextShowSystem,
    customLocalize,
    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: LocaleSwitchVariants = 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({
            borderColor: "transparent",
            backgroundColor: "subtle",
            iconColor: "turkish",
            localeKey: "tr-TR",
            icon: ({
                size
            }) => {
                return <TRTRIcon
                    size={size + 5}
                />;
            }
        });
    }

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

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

    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,
        customBorderColor: currentVariant && currentVariant.borderColor ?
            currentVariant.borderColor
            :
            color,
        customColor: currentVariant && currentVariant.backgroundColor ?
            currentVariant.backgroundColor
            :
            color,
        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}
            />;
        },
        onPress: () => {
            NCoreUIKitLocalize.switch({
                localeKey: localeKeys[viewVariantIndex] as keyof NCoreUIKit.LocaleKey
            });
        },
        style: [
            style
        ]
    };

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

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