import * as React from 'react'
import {__, _x} from '@wordpress/i18n'

import {
	useMemo,
} from '@wordpress/element'

import {
	applyFilters,
} from '@wordpress/hooks'

import {
	withFilters,
	TabPanel,
	Icon,
} from '@wordpress/components'

import {
	PluginSidebarMoreMenuItem,
	PluginSidebar,
} from '@wordpress/editor'

import {
	settings as settingsIcon,
} from '@wordpress/icons'

import {
	RenderOptions,
} from '@ska/plugin'

import {
	IS_SETTINGS_PAGE,
} from '@ska/utils'

import {
	optionsSchema,
	settingsInitialTabName,
} from '../../data'

import {
	usePluginOptions,
	usePluginOptionsEdit,
	PluginOptions,
	ROOT_KEY,
} from './options'

import {
	ExpandSidebarButton,
} from '../../components'

import customControls from './controls'
import presetOptionsControls from '../../supports/presets/controls'
import variationOptionsControls from '../../supports/variations/controls'

export {
	usePluginOptions,
	usePluginOptionsEdit,
}

export type {
	PluginOptions,
}

import SkaComponentsStringsProvider from '../../components/SkaComponentsStringsProvider'
import OptionsStringsProvider from '../OptionsStringsProvider'
import {useHasPermissions} from '../permissions'
import {useFilters} from './hooks'
import PluginIcon from './plugin-icon'

import './style.scss'

export const PLUGIN_ID = 'ska-blocks-options'
const TITLE = __('ska-blocks', 'ska-blocks')

const controls = {
	...customControls,
	...presetOptionsControls,
	...variationOptionsControls,
}

const RenderPlugin: React.FC = () => {

	const [select, dispatch] = usePluginOptionsEdit()

	return (
		<RenderOptions<PluginOptions>
			slug='ska-blocks'
			rootKey={ROOT_KEY}
			schema={optionsSchema}
			controls={controls}
			select={select}
			dispatch={dispatch}
		/>
	)
}

const Plugin: React.FC = () => {

	const hasPermissions = useHasPermissions('admin')
	const options = usePluginOptions()

	useFilters(options)

	const TABS = applyFilters('ska.blocks.optionsPlugin.tabs', [
		{
			name: 'ska-blocks-options',
			...(IS_SETTINGS_PAGE && {
				icon: settingsIcon,
			}),
			title: __('Options', 'ska-blocks'),
			render: RenderPlugin,
		},
	]) as {name: string, icon?: React.JSX.Element, title: string, render: React.ReactElement}[]

	const stableTabs = useMemo(() => {
		return TABS.map(({title, icon, ...rest}) => ({
			...rest,
			title,
			...(icon && {
				title: <span className='ska-icon-wrapper'><Icon icon={icon} /> {title}</span>,
			}),
		}))
	// eslint-disable-next-line react-compiler/react-compiler
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [JSON.stringify(TABS.map(({name}) => name))])

	return <>
		{hasPermissions && <>
			<PluginSidebarMoreMenuItem
				target={PLUGIN_ID}
				children={TITLE}
			/>
			<PluginSidebar
				name={PLUGIN_ID}
				title={TITLE}
				className='ska-blocks__options'
			>
				<ExpandSidebarButton />
				<SkaComponentsStringsProvider>
					<OptionsStringsProvider>
						<TabPanel
							className='ska-blocks__options__tab-panel'
							// @ts-expect-error
							tabs={stableTabs}
							initialTabName={settingsInitialTabName || 'ska-blocks-options'}
							children={({render: Component}) => <Component />}
						/>
					</OptionsStringsProvider>
				</SkaComponentsStringsProvider>
			</PluginSidebar>
		</>}
	</>
}

export default {
	name: PLUGIN_ID,
	icon: <PluginIcon />,
	render: withFilters('ska.blocks.optionsPlugin')(Plugin),
}