import { BaseControl } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import type { Attributes } from '../../types';
import { Headlights } from './headers/Headlights';
import { HeadlightsMuted } from './headers/HeadlightsMuted';
import { HeadlightsMutedAlt } from './headers/HeadlightsMutedAlt';
import { PillString } from './headers/PillString';
import { SimpleString } from './headers/SimpleString';
import { StringSmall } from './headers/StringSmall';
import { UnsupportedTheme } from './misc/Unsupported';

type HeaderSelectProps = {
	attributes: Attributes;
	onClick: (slug: string) => void;
};

const unsupportedWithCssVars = ['headlightsMutedAlt'];

export const HeaderSelect = ({ attributes, onClick }: HeaderSelectProps) => {
	const { headerType, ...attributesWithoutHeaderType }: Attributes = attributes;
	const { bgColor } = attributes;
	const types = {
		none: __('None', 'code-block-pro'),
		headlights: __('Headlights', 'code-block-pro'),
		headlightsMuted: __('Headlights muted', 'code-block-pro'),
		headlightsMutedAlt: __('Headlights muted alt', 'code-block-pro'),
		simpleString: __('Simple string', 'code-block-pro'),
		stringSmall: __('String muted', 'code-block-pro'),
		pillString: __('Pill string', 'code-block-pro'),
	};
	const isUnsupported = bgColor?.startsWith('var(');

	return (
		<div className="code-block-pro-editor">
			{Object.entries(types).map(([slug, type]) => (
				<BaseControl
					id={`code-block-pro-header-${slug}`}
					label={
						headerType === slug
							? sprintf(__('%s (current)', 'code-block-pro'), type)
							: type
					}
					help={
						['simpleString', 'pillString', 'stringSmall'].includes(slug)
							? // Settings refers to the panel that can be expanded
								__('Set the text at the top of this panel.', 'code-block-pro')
							: undefined
					}
					key={slug}
				>
					<button
						id={`code-block-pro-header-${slug}`}
						type="button"
						onClick={() => onClick(slug)}
						className="p-0 border flex items-start w-full text-left outline-none cursor-pointer no-underline ring-offset-2 ring-offset-white focus:shadow-none focus:ring-wp overflow-x-auto"
					>
						<span className="pointer-events-none w-full">
							<HeaderType headerType={slug} {...attributesWithoutHeaderType} />
							<span
								className="block w-full h-8"
								style={{ backgroundColor: bgColor }}
							/>
						</span>
					</button>
					{isUnsupported && unsupportedWithCssVars.includes(slug) && (
						<UnsupportedTheme />
					)}
				</BaseControl>
			))}
		</div>
	);
};

export const HeaderType = (attributes: Attributes) => {
	const { headerType, bgColor } = attributes;
	const isACustomTheme = bgColor?.startsWith('var(');
	if (isACustomTheme && unsupportedWithCssVars.includes(headerType ?? '')) {
		return null;
	}

	if (headerType === 'headlights') {
		return <Headlights {...attributes} />;
	}
	if (headerType === 'headlightsMuted') {
		return <HeadlightsMuted {...attributes} />;
	}
	if (headerType === 'headlightsMutedAlt') {
		return <HeadlightsMutedAlt {...attributes} />;
	}
	if (headerType === 'simpleString') {
		return <SimpleString {...attributes} />;
	}
	if (headerType === 'stringSmall') {
		return <StringSmall {...attributes} />;
	}
	if (headerType === 'pillString') {
		return <PillString {...attributes} />;
	}
	return null;
};