import { useCategories } from '@library/hooks/useCategories';
import { useCacheStore } from '@library/state/cache';
import { useSiteSettingsStore } from '@library/state/site';
import { PanelBody, PanelRow, Spinner } from '@wordpress/components';
import { useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';

export const CategoryControl = () => {
	const { category, setCategory } = useSiteSettingsStore();
	const { data, isLoading, errorCount } = useCategories();
	const { categories, setCategories } = useCacheStore();

	useEffect(() => {
		if (isLoading || errorCount) return;
		setCategories(data);
	}, [data, isLoading, setCategories, errorCount]);

	useEffect(() => {
		if (!categories?.length || category) return;
		setCategory('all');
	}, [category, setCategory, categories]);

	return (
		<PanelBody
			title={__('Design Type', 'extendify-local')}
			className="ext-type-control p-0 border-0 [&_.components-panel\_\_body-title]:-mx-5 [&_.components-panel\_\_body-title]:mt-0 [&_.components-panel\_\_body-title]:mb-0.5"
			initialOpen={true}
		>
			<PanelRow>
				<CategoryList
					categories={categories}
					errorCount={errorCount}
					current={category}
					setCurrent={setCategory}
				/>
			</PanelRow>
		</PanelBody>
	);
};

const CategoryList = ({ categories, errorCount, current, setCurrent }) => {
	const classes = (slug) =>
		classNames(
			'text-sm w-full text-left rtl:text-right px-3 py-1 mb-0.5 block rounded',
			{
				'bg-design-main text-design-text': current === slug,
				'bg-transparent text-gray-900 hover:bg-gray-100': current !== slug,
			},
		);
	// If we have categories, return early no matter the error
	if (categories?.length) {
		return (
			<ul className="m-0 -mt-1.5 max-h-half w-full overflow-y-auto rounded-b border border-gray-300 px-1 py-2">
				<li className="m-0 p-0">
					<button
						type="button"
						id="extendify-library-category-all"
						onClick={() => setCurrent('all')}
						className={classes('all')}
					>
						{__('All', 'extendify-local')}
					</button>
				</li>
				{categories.map(({ slug, id, name }) => {
					return (
						<li key={id} className="m-0 p-0">
							<button
								type="button"
								id={`extendify-library-category-${slug}`}
								onClick={() => setCurrent(slug)}
								className={classes(slug)}
							>
								{name}
							</button>
						</li>
					);
				})}
			</ul>
		);
	}

	if (errorCount > 1) {
		return (
			<div className="-mt-1 flex w-full flex-col items-center justify-center gap-2 border-t border-gray-300 p-2">
				<span>{__('Retrying...', 'extendify-local')}</span>
				<Spinner />
			</div>
		);
	}

	return (
		<div className="-mt-1 flex w-full justify-center border-t border-gray-300 p-2">
			<span className="sr-only">{__('Fetching...', 'extendify-local')}</span>
			<Spinner />
		</div>
	);
};
<?xml version="1.0"?>
<oembed><version>1.0</version><provider_name>DEFANTI ELETTRONICA</provider_name><provider_url>https://defanti-elettronica.com</provider_url><author_name>s t</author_name><author_url>https://defanti-elettronica.com/index.php/author/trex/</author_url><title>Home</title><type>rich</type><width>600</width><height>338</height><html>&lt;blockquote class="wp-embedded-content" data-secret="xKGVfyUEUm"&gt;&lt;a href="https://defanti-elettronica.com/"&gt;Home&lt;/a&gt;&lt;/blockquote&gt;&lt;iframe sandbox="allow-scripts" security="restricted" src="https://defanti-elettronica.com/embed/#?secret=xKGVfyUEUm" width="600" height="338" title="&#x201C;Home&#x201D; &#x2014; DEFANTI ELETTRONICA" data-secret="xKGVfyUEUm" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"&gt;&lt;/iframe&gt;&lt;script&gt;
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&amp;&amp;d.addEventListener&amp;&amp;"undefined"!=typeof URL&amp;&amp;(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&amp;&amp;!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i&lt;o.length;i++)o[i].style.display="none";for(i=0;i&lt;a.length;i++)s=a[i],e.source===s.contentWindow&amp;&amp;(s.removeAttribute("style"),"height"===t.message?(1e3&lt;(r=parseInt(t.value,10))?r=1e3:~~r&lt;200&amp;&amp;(r=200),s.height=r):"link"===t.message&amp;&amp;(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&amp;&amp;n.host===r.host&amp;&amp;l.activeElement===s&amp;&amp;(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r&lt;s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
//# sourceURL=https://defanti-elettronica.com/wp-includes/js/wp-embed.min.js
&lt;/script&gt;
</html></oembed>
