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

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

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

import {
	Button,
	type ButtonProps,
} from '@ska/components'

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

import {
	usePluginPreference,
} from '../../store'

export type ExpandSidebarButtonProps = ButtonProps

const ExpandSidebarButton: React.FC<ExpandSidebarButtonProps> = props => {

	const [expanded, setExpanded] = usePluginPreference('sidebarExpanded')

	if(IS_SETTINGS_PAGE) {
		return null
	}

	return (
		<div className='ska-blocks__expand-sidebar-button'>
			<Button
				aria-label={expanded ? __('Contract sidebar', 'ska-blocks') : __('Expand sidebar', 'ska-blocks')}
				label={expanded ? __('Contract sidebar', 'ska-blocks') : __('Expand sidebar', 'ska-blocks')}
				showTooltip
				tooltipPosition='bottom left'
				icon={<Icon icon={upload} style={{transform: expanded ? 'rotate(90deg)' : 'rotate(-90deg)'}} />}
				{...props}
				aria-pressed={expanded}
				onClick={() => setExpanded(!expanded)}
			/>
			{expanded && (
				<style>{`
					.interface-complementary-area__fill:has(>.editor-sidebar),
					.interface-complementary-area__fill:has(>.editor-sidebar) > .editor-sidebar,
					.interface-navigable-region interface-interface-skeleton__sidebar > .interface-complementary-area__fill,
					.interface-navigable-region interface-interface-skeleton__sidebar > .interface-complementary-area__fill > * {
						width: min(860px, 60vw) !important;
					}
					.interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
						box-shadow: -1px 0 0 0 rgb(0 0 0 / 0.133), 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
					}
					.has-footer .interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
						margin-bottom: -25px;
					}
				`}</style>
			)}
		</div>
	)
}

export default ExpandSidebarButton