import React from 'react'
import classnames from 'classnames'
import { __ } from '@wordpress/i18n'
import { isLicensed } from '../../../utils/screen'
import { isCondition } from '../../../utils/snippets/snippets'
import { Badge } from '../../common/Badge'
import { Button } from '../../common/Button'
import { useSnippetForm } from '../SnippetForm/WithSnippetFormContext'
import type { Dispatch, SetStateAction } from 'react'

export interface ConditionModalButtonProps {
	setIsDialogOpen: Dispatch<SetStateAction<boolean>>
}

export const ConditionModalButton: React.FC<ConditionModalButtonProps> = ({ setIsDialogOpen }) => {
	const { snippet, isReadOnly } = useSnippetForm()

	const hasCondition = 0 !== snippet.conditionId

	return (
		<div className={classnames(
			'conditions-editor-open block-form-field',
			hasCondition ? 'has-condition' : 'no-condition'
		)}>
			{isCondition(snippet) ? null
				: <>
					<div className="conditions-editor-header">
						<strong>{__('Conditions', 'code-snippets')}</strong>
						{!isLicensed() && <Badge name="pro" small>{__('Pro', 'code-snippets')}</Badge>}
					</div>

					<Button large disabled={isReadOnly} onClick={() => setIsDialogOpen(true)}>
						<Badge name="cond" small />
						{hasCondition
							? __('Edit Conditions', 'code-snippets')
							: __('Add Conditions', 'code-snippets')}
					</Button>
				</>}
		</div>
	)
}