import {
    ActionIcon,
    Group, rem,
    Tooltip,
    useComputedColorScheme,
    useMantineColorScheme,
    useMantineTheme
} from "@mantine/core";
import {iconMStyle} from "~/styles";

import ThemeLightDarkIcon from "mdi-react/ThemeLightDarkIcon";
import WeatherNightIcon from "mdi-react/WeatherNightIcon";
import WeatherSunnyIcon from "mdi-react/WeatherSunnyIcon";
import type {CSSProperties} from "react";


export function ThemeToggle({extraStyle, iconStyle}: {extraStyle?: CSSProperties, iconStyle?: CSSProperties}) {
    const { colorScheme, setColorScheme } = useMantineColorScheme();
    // const [colorSchemeState, toggleColorSchemeState] = useToggle(['auto', 'dark', 'light'] as const);
    const computedColorScheme = useComputedColorScheme('light');
    const theme = useMantineTheme();

    const nextScheme = colorScheme === "auto" ? "dark" : colorScheme === "dark" ? "light" : "auto";

    const onClickChangeColorScheme = () => {
        setColorScheme(nextScheme)
    }

    return (
        <Group justify="center">
            <Tooltip label={colorScheme === 'auto' ? 'Auto' : colorScheme === 'dark' ? 'Dark' : 'Light'} position="left">
                <ActionIcon variant="light" size="md" onClick={onClickChangeColorScheme} color={
                    colorScheme === 'auto' ? undefined : computedColorScheme === 'dark' ? theme.colors.blue[4] : theme.colors.yellow[6]
                } style={ extraStyle ? {...extraStyle} : {} }>
                    {colorScheme === 'auto' ? <ThemeLightDarkIcon style={iconStyle || iconMStyle}/> :
                        colorScheme === 'dark' ? <WeatherNightIcon style={iconStyle || iconMStyle}/> : <WeatherSunnyIcon style={iconStyle || iconMStyle}/>}
                </ActionIcon>
            </Tooltip>
        </Group>
    );
}