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

import {
    useEffect,
    useState,
    type FC
} from "react";
import type IPaletteSwitcherProps from "./type";
import type {
    ThemeSwitchVariants
} from "./type";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type {
    NCoreUIKitIcon
} from "../../types";
import Button from "../button";
import {
    NIBGATCommunityIcon,
    CayCoreIcon,
    NIBGATIcon
} from "../../assets/svg";
import HighlightButton from "../highlightButton";

const PaletteSwitcher: FC<IPaletteSwitcherProps> = ({
    variants: variantsProps = [],
    isWorkWithHighlightButton,
    isWorkWithNextShowSystem,
    customTheme,
    color,
    style,
    ...props
}) => {
    const {
        activePalette,
        paletteKeys
    } = NCoreUIKitTheme.useContext(customTheme);

    const [
        currentIndex,
        setCurrentIndex
    ] = useState(paletteKeys.findIndex(t => t === activePalette));

    useEffect(() => {
        const cI = paletteKeys.findIndex(tI => tI === activePalette);

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

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

    const variantsPre: ThemeSwitchVariants = variantsProps;

    const isHaveNC = variantsProps.findIndex(iV => iV.paletteKey === "nibgat-community") !== -1;
    const isHaveCC = variantsProps.findIndex(iV => iV.paletteKey === "caycore") !== -1;
    const isHaveN = variantsProps.findIndex(iV => iV.paletteKey === "nibgat") !== -1;

    if(!isHaveN) {
        variantsPre.unshift({
            borderColor: "transparent",
            backgroundColor: "subtle",
            paletteKey: "nibgat",
            iconColor: "moon",
            icon: ({
                size
            }) => {
                return <NIBGATIcon
                    size={size + 5}
                />;
            }
        });
    }

    if(!isHaveNC) {
        variantsPre.unshift({
            paletteKey: "nibgat-community",
            borderColor: "transparent",
            backgroundColor: "subtle",
            iconColor: "moon",
            icon: ({
                size
            }) => {
                return <NIBGATCommunityIcon
                    size={size + 5}
                />;
            }
        });
    }

    if(!isHaveCC) {
        variantsPre.unshift({
            borderColor: "transparent",
            backgroundColor: "subtle",
            paletteKey: "caycore",
            iconColor: "moon",
            icon: ({
                size
            }) => {
                return <CayCoreIcon
                    size={size + 5}
                />;
            }
        });
    }

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

    const currentVariantIndex = variants.findIndex(e => e.paletteKey === activePalette);

    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: () => {
            NCoreUIKitTheme.switch({
                paletteKey: paletteKeys[viewVariantIndex]
            });
        },
        style: [
            style
        ]
    };

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

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