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

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

import {
	addFilter,
	removeFilter,
} from '@wordpress/hooks'

import {
	withFilters,
	PanelBody,
	CheckboxControl,
} from '@wordpress/components'

import {
	help,
} from '@wordpress/icons'

import {
	Button,
	ModalButton,
	tailwindIcon,
} from '@ska/components'

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

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

import controls from './controls'
import {useHasPermissions} from '../permissions'
import SkaBlocks from '../../SkaBlocks'

import {
	tailwind4Schema,
	TAILWIND_VER,
} from '../../data'

import {
	useTailwind4Options,
	useTailwind4OptionsEdit,
	Tailwind4Options,
	ROOT_KEY,
} from './options'

export {
	useTailwind4Options,
	useTailwind4OptionsEdit,
}

export type {
	Tailwind4Options,
}

import './style.scss'

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

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

	const [select, dispatch] = useTailwind4OptionsEdit()

	const {
		version,
		keepStale = false,
		lastmod = 0,
		configured = false,
	} = select.getOptions() || {}

	const isDirty = version === '0.0.0'
	const isConfigured = configured && lastmod > 0
	const recompileChecked = !keepStale
	const canToggleRecompile = isDirty && isConfigured

	return <>
		<PanelBody className='ska-blocks-tailwind4__compile-toggle'>
			<div className='ska-blocks-tailwind4__compile-toggle__wrapper'>
				{!canToggleRecompile && <p>{sprintf(__('Tailwind version %s.', 'ska-blocks'), TAILWIND_VER)}</p>}
				{canToggleRecompile && <>
					<CheckboxControl
						label={__('Re-compile content', 'ska-blocks')}
						checked={recompileChecked}
						onChange={() => dispatch.toggleKeepStale()}
						__nextHasNoMarginBottom
					/>
					<ModalButton
						title={__('Updating Tailwind configuration', 'ska-blocks')}
						aria-label={__('View info about re-compilation.', 'ska-blocks')}
						icon={help}
						size='small'
						iconSize={20}
						modalProps={{
							size: 'medium',
						}}
					>
						<p>{__(`Check this box if you've modified Tailwind configuration in a way that affects the generated CSS output.`, 'ska-blocks')}</p>
						<p>{__(`When enabled, all pages will automatically re-compile the next time you edit them. All presets will be re-compiled as well (you'll need to save once more to persist them).`, 'ska-blocks')}</p>
						<p>{__(`For minor changes — such as adding a new theme variable, updating a color or font — you can opt out, since these adjustments typically don’t require re-compilation to take effect.`, 'ska-blocks')}</p>
					</ModalButton>
					<Button
						className='ska-blocks-tailwind4__compile-toggle__reset'
						size='small'
						variant='link'
						children={__(`Reset`, 'ska-blocks')}
						label={__(`Revert current changes`, 'ska-blocks')}
						showTooltip
						tooltipPosition='top left'
						onClick={() => dispatch.resetChanges()}
					/>
				</>}
			</div>
		</PanelBody>
		<RenderOptions<Tailwind4Options>
			slug='ska-tailwind4'
			rootKey={ROOT_KEY}
			controls={controls}
			schema={tailwind4Schema}
			select={select}
			dispatch={dispatch}
		/>
	</>
}

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

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

	useEffect(() => {
		SkaBlocks.compiler.loadDesignSystem(options)
	}, [options])

	useEffect(() => {

		if(!hasPermissions) {
			return
		}

		addFilter(
			'ska.blocks.optionsPlugin.tabs',
			`ska-blocks/${PLUGIN_ID}/tab`,
			tabs => ([
				...tabs,
				{
					name: PLUGIN_ID,
					...(IS_SETTINGS_PAGE && {
						icon: tailwindIcon,
					}),
					title: TITLE,
					render: RenderPlugin,
				},
			])
		)

		return () => {
			removeFilter(
				'ska.blocks.optionsPlugin.tabs',
				`ska-blocks/${PLUGIN_ID}/tab`
			)
		}
	}, [hasPermissions])

	return null
}

export default {
	name: PLUGIN_ID,
	render: withFilters('ska.blocks.tailwindPlugin')(Plugin),
}