import { __, _x } from '@wordpress/i18n'
import React from 'react'
import { useSnippetForm } from '../WithSnippetFormContext'
import { createSnippetObject, isCondition } from '../../../../utils/snippets/snippets'
import type { Snippet } from '../../../../types/Snippet'

const OPTIONS = window.CODE_SNIPPETS_EDIT

const getAddNewHeading = (snippet: Snippet): string =>
	isCondition(snippet)
		? __('Add New Condition', 'code-snippets')
		: __('Create New Snippet', 'code-snippets')

const getPageHeading = (snippet: Snippet): string => {
	if (isCondition(snippet)) {
		return snippet.locked
			? __('View Condition', 'code-snippets')
			: __('Edit Condition', 'code-snippets')
	}

	return snippet.locked
		? __('View Snippet', 'code-snippets')
		: __('Edit Snippet', 'code-snippets')
}

export const PageHeading: React.FC = () => {
	const { snippet, updateSnippet, setCurrentNotice } = useSnippetForm()

	return (
		<>
			<h1>
				{snippet.id
					? <>
						{`${getPageHeading(snippet)} `}

						<a
							href={window.CODE_SNIPPETS?.urls.addNew}
							className="page-title-action"
							onClick={event => {
								event.preventDefault()
								updateSnippet(({ scope }) => createSnippetObject({ scope }))
								setCurrentNotice(undefined)

								window.document.title = window.document.title
									.replace(__('Edit Snippet', 'code-snippets'), getAddNewHeading(snippet))
									.replace(__('Edit Condition', 'code-snippets'), getAddNewHeading(snippet))

								window.history.pushState({}, '', window.CODE_SNIPPETS?.urls.addNew)
							}}
						>
							{_x('Add New', 'snippet', 'code-snippets')}
						</a>
					</>
					: getAddNewHeading(snippet)}

				{OPTIONS?.pageTitleActions && Object.entries(OPTIONS.pageTitleActions).map(([label, url]) =>
					<>
						<a key={label} href={url} className="page-title-action">{label}</a>{' '}
					</>
				)}
			</h1>

			<hr className="wp-header-end" />
		</>
	)
}