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

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

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

import {
	TailwindFeatureClassNamesContext,
	TailwindFeatureContext,
} from '..'

import './style.scss'

export interface ToggleButtonProps {
	isOpen: boolean
	onClick: () => void
}

const ToggleButton: React.FC<ToggleButtonProps> = ({
	isOpen,
	onClick,
}) => {

	const {
		id,
		label,
	} = useContext(TailwindFeatureContext)

	const {
		classNames = '',
		selectorsClassNames = '',
	} = useContext(TailwindFeatureClassNamesContext)

	return (
		<Button
			id={id}
			onClick={onClick}
			className={cx('ska-blocks__toggle-button', {
				'ska-blocks__toggle-button--is-open': isOpen,
			})}
			aria-haspopup={true}
			aria-expanded={isOpen}
		>
			<div className='ska-blocks__toggle-button__label'>{label}</div>
			<code className='ska-blocks__toggle-button__detail'>
				{classNames.split(' ').filter(v => v).map((className, index) => (
					<span
						key={`c-${index}`}
						className='ska-blocks__toggle-button__detail__item'
					>
						{className}
					</span>
				))}
				{selectorsClassNames.split(' ').filter(v => v).map((className, index) => (
					<span
						key={`sc-${index}`}
						className='ska-blocks__toggle-button__detail__item ska-blocks__toggle-button__detail__item--secondary'
					>
						{className}
					</span>
				))}
			</code>
		</Button>
	)
}

export default ToggleButton