/**
 * Typography Settings Panel
 * フォント設定表示（読み取り専用）
 */

import { useSettings } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import {
	PanelBody,
	__experimentalVStack as VStack,
	__experimentalText as Text,
} from '@wordpress/components';

const FontFamilySubPanel = ( { initialOpen = true } ) => {
	const [ fontFamiliesRaw ] = useSettings( 'typography.fontFamilies' );

	const getFontFamiliesArray = () => {
		if ( ! fontFamiliesRaw ) {
			return [];
		}
		if ( Array.isArray( fontFamiliesRaw ) ) {
			return fontFamiliesRaw;
		}
		if ( typeof fontFamiliesRaw === 'object' ) {
			return Object.values( fontFamiliesRaw ).flat().filter( Boolean );
		}
		return [];
	};

	const fontFamilies = getFontFamiliesArray();

	const getEditUrl = () => {
		const adminUrl = window.zenBlocks?.adminUrl || window.location.origin + '/wp-admin/';
		const isBlockTheme = window.zenBlocks?.isBlockTheme;
		if ( isBlockTheme ) {
			return (
				adminUrl + 'site-editor.php?p=%2Fstyles&section=%2Ftypography'
			);
		}
		return adminUrl + 'customize.php';
	};

	return (
		<PanelBody
			title={ __( 'Font Family', 'zenblocks' ) }
			initialOpen={ initialOpen }
			className="zenblocks-nested-panel zenblocks-nested-panel--level-1 zenblocks-font-family-settings"
		>
			<VStack
				spacing={ 4 }
				className="zenblocks-font-family-settings__content"
			>
				{ fontFamilies.length === 0 ? (
					<Text className="zenblocks-font-family-settings__empty">
						{ __( 'No fonts configured', 'zenblocks' ) }
					</Text>
				) : (
					<div className="zenblocks-font-family-settings__list">
						{ fontFamilies.map( ( font, index ) => (
							<div
								key={ index }
								className="zenblocks-font-family-settings__item"
							>
								<div className="zenblocks-font-family-settings__name">
									{ font.name }
								</div>
								<div
									className="zenblocks-font-family-settings__preview"
									style={ { fontFamily: font.fontFamily } }
								>
									Aa あいう 123
								</div>
							</div>
						) ) }
					</div>
				) }

				<div className="zenblocks-font-family-settings__actions">
					<a
						href={ getEditUrl() }
						target="_blank"
						rel="noopener noreferrer"
						className="zenblocks-edit-link-button"
					>
						<svg
							width="16"
							height="16"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="2"
							strokeLinecap="round"
							strokeLinejoin="round"
						>
							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
						</svg>
						{ __( 'Edit Fonts', 'zenblocks' ) }
					</a>
				</div>
			</VStack>
		</PanelBody>
	);
};

const FontSizeItem = ( { name, size, fluid } ) => {
	const hasFluid = fluid && fluid.min && fluid.max;

	const formatSize = ( value ) => {
		if ( ! value ) {
			return null;
		}
		if ( typeof value === 'number' ) {
			return `${ value }px`;
		}
		return value;
	};

	const displaySize = formatSize( size );

	return (
		<div className="zenblocks-font-size-settings__item">
			<div className="zenblocks-font-size-settings__name">{ name }</div>
			<div className="zenblocks-font-size-settings__size-info">
				{ hasFluid ? (
					<>
						<span className="zenblocks-font-size-settings__min">
							{ fluid.min }
						</span>
						<span className="zenblocks-font-size-settings__separator">
							〜
						</span>
						<span className="zenblocks-font-size-settings__max">
							{ fluid.max }
						</span>
					</>
				) : displaySize ? (
					<span className="zenblocks-font-size-settings__fixed">
						{ displaySize }
					</span>
				) : null }
			</div>
		</div>
	);
};

const FontSizeSection = ( { title, fontSizes } ) => {
	if ( ! fontSizes || fontSizes.length === 0 ) {
		return null;
	}

	return (
		<div className="zenblocks-font-size-section">
			<Text className="zenblocks-font-size-section__title">
				{ title }
			</Text>
			<div className="zenblocks-font-size-section__list">
				{ fontSizes.map( ( item, index ) => (
					<FontSizeItem
						key={ index }
						name={ item.name }
						size={ item.size }
						fluid={ item.fluid }
					/>
				) ) }
			</div>
		</div>
	);
};

const FontSizeSubPanel = ( { initialOpen = false } ) => {
	const [ themeFontSizes = [], customFontSizes = [] ] = useSettings(
		'typography.fontSizes.theme',
		'typography.fontSizes.custom'
	);

	const getEditUrl = () => {
		const adminUrl = window.zenBlocks?.adminUrl || window.location.origin + '/wp-admin/';
		const isBlockTheme = window.zenBlocks?.isBlockTheme;
		if ( isBlockTheme ) {
			return (
				adminUrl +
				'site-editor.php?p=%2Fstyles&section=%2Ftypography%2Ffont-sizes'
			);
		}
		return adminUrl + 'customize.php';
	};

	const hasAnyFontSizes =
		themeFontSizes.length > 0 || customFontSizes.length > 0;

	return (
		<PanelBody
			title={ __( 'Font Size', 'zenblocks' ) }
			initialOpen={ initialOpen }
			className="zenblocks-nested-panel zenblocks-nested-panel--level-1 zenblocks-font-size-settings"
		>
			<VStack
				spacing={ 4 }
				className="zenblocks-font-size-settings__content"
			>
				{ ! hasAnyFontSizes ? (
					<Text className="zenblocks-font-size-settings__empty">
						{ __( 'No font sizes configured', 'zenblocks' ) }
					</Text>
				) : (
					<VStack spacing={ 3 }>
						<FontSizeSection
							title={ __( 'Theme', 'zenblocks' ) }
							fontSizes={ themeFontSizes }
						/>
						<FontSizeSection
							title={ __( 'Custom', 'zenblocks' ) }
							fontSizes={ customFontSizes }
						/>
					</VStack>
				) }

				<div className="zenblocks-font-size-settings__actions">
					<a
						href={ getEditUrl() }
						target="_blank"
						rel="noopener noreferrer"
						className="zenblocks-edit-link-button"
					>
						<svg
							width="16"
							height="16"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							strokeWidth="2"
							strokeLinecap="round"
							strokeLinejoin="round"
						>
							<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
							<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
						</svg>
						{ __( 'Edit Font Sizes', 'zenblocks' ) }
					</a>
				</div>
			</VStack>
		</PanelBody>
	);
};

export const TypographySettings = ( { initialOpen = true } ) => {
	return (
		<PanelBody
			title={ __( 'Typography', 'zenblocks' ) }
			initialOpen={ initialOpen }
			className="zenblocks-typography-settings"
		>
			<FontFamilySubPanel initialOpen={ false } />
			<FontSizeSubPanel initialOpen={ false } />
		</PanelBody>
	);
};
