import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react';
import { ThemeProvider, useTheme } from 'next-themes';
import * as React from 'react';
import { LuMoon, LuSun } from 'react-icons/lu';

export function ColorModeProvider( props ) {
	return (
		<ThemeProvider
			attribute="class"
			disableTransitionOnChange
			{ ...props }
		/>
	);
}

export function useColorMode() {
	const { resolvedTheme, setTheme, forcedTheme } = useTheme();
	const colorMode = forcedTheme || resolvedTheme;
	const toggleColorMode = () => {
		setTheme( resolvedTheme === 'dark' ? 'light' : 'dark' );
	};
	return {
		colorMode,
		setColorMode: setTheme,
		toggleColorMode,
	};
}

export function useColorModeValue( light, dark ) {
	const { colorMode } = useColorMode();
	return colorMode === 'dark' ? dark : light;
}

export function ColorModeIcon() {
	const { colorMode } = useColorMode();
	return colorMode === 'dark' ? <LuMoon /> : <LuSun />;
}

export const ColorModeButton = React.forwardRef(
	function ColorModeButton( props, ref ) {
		const { toggleColorMode } = useColorMode();
		return (
			<ClientOnly fallback={ <Skeleton boxSize="9" /> }>
				<IconButton
					onClick={ toggleColorMode }
					variant="ghost"
					aria-label="Toggle color mode"
					size="sm"
					ref={ ref }
					{ ...props }
					css={ {
						_icon: {
							width: '5',
							height: '5',
						},
					} }
				>
					<ColorModeIcon />
				</IconButton>
			</ClientOnly>
		);
	}
);

export const LightMode = React.forwardRef( function LightMode( props, ref ) {
	return (
		<Span
			color="fg"
			display="contents"
			className="chakra-theme light"
			colorPalette="light"
			ref={ ref }
			{ ...props }
		/>
	);
} );

export const DarkMode = React.forwardRef( function DarkMode( props, ref ) {
	return (
		<Span
			color="fg"
			display="contents"
			className="chakra-theme dark"
			colorPalette="dark"
			ref={ ref }
			{ ...props }
		/>
	);
} );
