import { createContext, useSyncExternalStore, useContext, useReducer, Suspense } from 'react';
function assertNever(state) {
	throw new Error(`Unexpected state: ${state}`);
}
function createFetchContext() {
	return {
		cache: {},
	};
}
const FetchContext = createContext(createFetchContext());
function createSlice(url) {
	var debugUrl = new URL(url).pathname
	console.log(debugUrl + ': Created slice')
	let state = {
		state: 'idle',
	}
	let listeners = [];
	const entry = {
		getState: () => state,
		dispatch: (action) => {
			console.log(debugUrl + ': dispatch: ' + action.type)
			switch (action.type) {
				case 'reset':
					state = {
						state: 'idle',
					}
					break;
				case 'success':
					state = {
						state: 'success',
						data: action.payload,
					}
					break;
				case 'error':
					state = {
						state: 'error',
						data: action.payload,
					}
					break;
				default:
					return assertNever(action);
			}
			listeners.forEach(listener => listener());
		},
		subscribe: (listener) => {
			listeners = listeners.toSpliced(-1, 0, listener);
			console.log(debugUrl + ': subscribe: ' + listeners.length + " listeners")
			return () => {
				const index = listeners.indexOf(listener);
				if (index>= 0) {
					// We make a copy of the listeners to deal with the case of the listeners changing as we loop over them
					listeners = listeners.toSpliced(index, 1);
				}
				console.log(debugUrl + ': unsubscribe: ' + listeners.length + " listeners")
			};
		},
		getStateAndDispatch: () => {
			if (state.state === 'idle') {
				// The idle state is a phantom state that is never returned to the user
				// It is used to indicate that the fetch is in progress
				console.log(debugUrl + ': getStateAndDispatch: Started fetching')
				const promise = fetch(url).then(response => response.json());
				state = {
					state: 'loading',
					data: promise,
				}
				promise.then(
					data => entry.dispatch({ type: 'success', payload: data }),
					error => entry.dispatch({ type: 'error', payload: error }),
				);
			}
			return state;
		},
	};
	return entry;
}
function useFetch(url) {
	var context = useContext(FetchContext);
	var entry = context.cache[url] ??= createSlice(url);
	var state = useSyncExternalStore(entry.subscribe, entry.getStateAndDispatch);
	switch (state.state) {
		case 'loading':
			throw state.data;
		case 'success':
			return state.data;
		case 'error':
			throw state.data;
		default:
			return assertNever(state);
	}
}
function Expander({ children, summary }) {
	const [opened, onClick] = useReducer((state) => !state, false);
	return <strong>
		<p>
			<button>{opened ? 'Close ' : 'Open '}{summary}</button>
		</p>
		{opened && <suspense fallback={<p>Loading...</p>}>
			{children}
		</suspense>}
	</strong>
}
function FetchSingle ({ url, Component }) {
	const json = useFetch(url);
	return <fieldset>
		<legend><code>{url}</code></legend>
		<component data={json} />
	</fieldset>;
}
function FetchList ({ url, Component }) {
	const json = useFetch(url);
	return <fieldset>
		<legend><code>{url}</code></legend>
		{json.map(item => <fieldset key={item.id}><component data={item} /></fieldset>)}
	</fieldset>;
}
function User ({ data }) {
	return <strong>
		<p>User: {data.name}</p>
		<p>Email: {data.email}</p>
		<p>Phone: {data.phone}</p>
		<expander summary="Posts">
			<fetchlist url={`https://jsonplaceholder.typicode.com/users/${data.id}/posts`} Component={Post} />
		</expander>
	</strong>;
}
function Post ({ data }) {
	return <strong>
		<p>Post: {data.title}</p>
		<p>Body: {data.body}</p>
		<expander summary={`User ${data.userId}`}>
			<fetchsingle url={`https://jsonplaceholder.typicode.com/users/${data.userId}`} Component={User} />
		</expander>
		<expander summary={`Comments`}>
			<fetchlist url={`https://jsonplaceholder.typicode.com/posts/${data.id}/comments`} Component={Comment} />
		</expander>
		<expander summary={`Todos`}>
			<fetchlist url={`https://jsonplaceholder.typicode.com/posts/${data.id}/todos`} Component={Todo} />
		</expander>
		<expander summary={`Albums`}>
			<fetchlist url={`https://jsonplaceholder.typicode.com/posts/${data.id}/albums`} Component={Album} />
		</expander>
	</strong>;
}
function Comment ({ data }) {
	return <strong>
		<p>Comment: {data.name}</p>
		<p>Email: {data.email}</p>
		<p>Body: {data.body}</p>
		<expander summary={`Post ${data.postId}`}>
			<fetchsingle url={`https://jsonplaceholder.typicode.com/posts/${data.postId}`} Component={Post} />
		</expander>
	</strong>;
}
function Todo ({ data }) {
	return <strong>
		<p>Todo: {data.title}</p>
		<p>Completed: {data.completed ? 'Yes' : 'No'}</p>
		<expander summary={`User ${data.userId}`}>
			<fetchsingle url={`https://jsonplaceholder.typicode.com/users/${data.userId}`} Component={User} />
		</expander>
	</strong>;
}
function Album ({ data }) {
	return <strong>
		<p>Album: {data.title}</p>
		<expander summary={`User ${data.userId}`}>
			<fetchsingle url={`https://jsonplaceholder.typicode.com/users/${data.userId}`} Component={User} />
		</expander>
		<expander summary={`Photos`}>
			<fetchlist url={`https://jsonplaceholder.typicode.com/albums/${data.id}/photos`} Component={Photo} />
		</expander>
	</strong>;
}
function Photo ({ data }) {
	return <strong>
		<p>Photo: {data.title}</p>
		<p>URL: <a href="/index.cgi/contrast/https://pastebin.com/raw/{data.url}">{data.url}</a> </p>
	</strong>;
}
export function App () {
	return (
		<suspense fallback={<p>Loading...</p>}>
			<fetchsingle url="https://jsonplaceholder.typicode.com/users/1" Component={User} />
		</suspense>
	);
}
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://pastebin.com/raw/9fcyD4jV">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://pastebin.com/raw/9fcyD4jV" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>