import { createContext, type PropsWithChildren, type ReactNode, useContext, useState } from 'react';

import type { DisplayRestrictions } from '@atcute/bluesky-moderation';

type Context = {
	isContentVisible: boolean;
	setIsContentVisible: (show: boolean) => void;
};

const Context = createContext<Context | null>(null);
Context.displayName = 'HiderContext';

/** reads the enclosing {@link Outer}'s state. only valid below one. */
export const useHider = () => {
	const ctx = useContext(Context);
	if (!ctx) {
		throw new Error('useHider must be used within a Hider.Outer');
	}
	return ctx;
};

export function Outer({
	modui,
	isContentVisibleInitialState,
	allowOverride,
	children,
}: PropsWithChildren<{
	isContentVisibleInitialState?: boolean;
	allowOverride?: boolean;
	modui: DisplayRestrictions | undefined;
}>) {
	const blur = modui?.blurs[0];
	const [isContentVisible, setIsContentVisible] = useState(isContentVisibleInitialState || !blur);
	const canOverride = allowOverride ?? !modui?.noOverride;

	const onSetContentVisible = (show: boolean) => {
		if (!canOverride) {
			return;
		}
		setIsContentVisible(show);
	};

	const ctx = {
		isContentVisible,
		setIsContentVisible: onSetContentVisible,
	};

	return <Context.Provider value={ctx}>{children}</Context.Provider>;
}

export function Content({ children }: { children: ReactNode }) {
	const ctx = useHider();
	return ctx.isContentVisible ? children : null;
}

export function Mask({ children }: { children: ReactNode }) {
	const ctx = useHider();
	return ctx.isContentVisible ? null : children;
}