import { Component } from '@wordpress/element';
import parse from 'html-react-parser';
import { isHexColor } from '@vkblocks/utils/is-hex-color';
import { sanitizeSlug } from '@vkblocks/utils/sanitizeSlug';
import { fixBrokenUnicode } from '@vkblocks/utils/fixBrokenUnicode';

export class VKBButton extends Component {
	render() {
		const buttonTextColorCustom = this.props.lbTextColorCustom;
		const buttonColorCustom = this.props.lbColorCustom;
		const buttonColor = this.props.lbColor;
		const buttonType = this.props.lbType;
		const buttonAlign = this.props.lbAlign;
		const buttonSize = this.props.lbSize;
		const buttonUrl = this.props.lbUrl;
		const buttonTarget = this.props.lbTarget;
		const relAttribute = this.props.lbRelAttribute;
		const linkToPost = this.props.lbLinkToPost;
		let fontAwesomeIconBefore = this.props.lbFontAwesomeIconBefore;
		let fontAwesomeIconAfter = this.props.lbFontAwesomeIconAfter;
		if (fontAwesomeIconBefore) {
			fontAwesomeIconBefore = fixBrokenUnicode(fontAwesomeIconBefore);
		}
		if (fontAwesomeIconAfter) {
			fontAwesomeIconAfter = fixBrokenUnicode(fontAwesomeIconAfter);
		}
		const iconSizeBefore = this.props.lbIconSizeBefore;
		const iconSizeAfter = this.props.lbIconSizeAfter;
		const richText = this.props.lbRichtext;
		const subCaption = this.props.lbsubCaption;
		const lbsubCaptionRichText = this.props.lbsubCaptionRichText;
		const inlineStyle = this.props.inlineStyle;
		const borderRadius = this.props.borderRadius;
		// 任意指定の文字サイズ（単位込み CSS 値。例: 18px / 1.2em / 1rem）。
		// 値があるときはサイズプリセット(btn-*)を付けず、インライン font-size で指定する。
		// Optional font size as a CSS value with unit (e.g. 18px / 1.2em / 1rem).
		// When set, the size preset (btn-*) is omitted and the font size is applied inline instead.
		const fontSizeValue = this.props.lbFontSizeValue;
		let aClass = '';
		let iconBefore = '';
		let iconAfter = '';

		aClass = `vk_button_link`;

		// 塗り
		if (buttonType === '0' || buttonType === null) {
			// 規定カラーの場合
			if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
				aClass += ` btn has-background has-vk-color-${buttonColor}-background-color`;
			} else {
				aClass += ` btn has-background`;
				// カスタムパレットカラーの場合
				if (!isHexColor(buttonColorCustom)) {
					aClass += ` has-${sanitizeSlug(buttonColorCustom)}-background-color`;
				}
			}

			// 文字色
			if (
				buttonColor === 'custom' &&
				buttonTextColorCustom !== undefined
			) {
				aClass += ` btn has-text-color`;
				// カスタムパレットカラーの場合
				if (!isHexColor(buttonTextColorCustom)) {
					aClass += ` has-${sanitizeSlug(buttonTextColorCustom)}-color`;
				}
			}
			// 塗りなし
		} else if (buttonType === '1') {
			// 規定カラーの場合
			if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
				aClass += ` btn has-text-color is-style-outline has-vk-color-${buttonColor}-color`;
			} else {
				aClass += ` btn has-text-color is-style-outline`;
				// カスタムパレットカラーの場合
				if (!isHexColor(buttonColorCustom)) {
					aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`;
				}
			}
			// テキストのみ
		} else if (buttonType === '2') {
			// 規定カラーの場合
			if (buttonColor !== 'custom' && buttonColorCustom === undefined) {
				aClass += ` has-text-color vk_button_link-type-text has-vk-color-${buttonColor}-color`;
			} else {
				aClass += ` has-text-color vk_button_link-type-text`;
				// カスタムパレットカラーの場合
				if (!isHexColor(buttonColorCustom)) {
					aClass += ` has-${sanitizeSlug(buttonColorCustom)}-color`;
				}
			}
		}

		// 文字色がカスタムカラーの場合
		/*
		if (
			buttonTextColorCustom !== undefined &&
			isHexColor(buttonTextColorCustom) &&
			isSelected
		) {
			aStyle = {
				// 編集画面対策
				color: `${buttonTextColorCustom}`,
			};
		}
		*/

		// 任意の文字サイズ(fontSizeValue)が指定されている時は、サイズプリセット(btn-*)を
		// 付与しない（プリセットと数値指定を出力レベルで排他にする）。
		// 未指定（＝既存データを含む大多数）の時は従来どおり btn-{buttonSize} を付与するため、
		// 既存の保存済み HTML はバイト単位で不変になる。
		// When a font size value is set, do not add the size preset (btn-*) so the preset
		// and the numeric size are mutually exclusive at output level. When it is unset
		// (including existing data), btn-{buttonSize} is added as before, keeping the
		// saved HTML byte-identical for legacy blocks.
		if (!fontSizeValue) {
			aClass = `${aClass} btn-${buttonSize}`;
		}

		if (buttonAlign === 'block') {
			aClass = `${aClass} btn-block`;
		}

		//過去バージョンをリカバリーした時にiconを正常に表示する
		if (fontAwesomeIconBefore && !fontAwesomeIconBefore.match(/<i/)) {
			fontAwesomeIconBefore = `<i class="${fontAwesomeIconBefore}"></i>`;
		}
		if (fontAwesomeIconAfter && !fontAwesomeIconAfter.match(/<i/)) {
			fontAwesomeIconAfter = `<i class="${fontAwesomeIconAfter}"></i>`;
		}

		if (fontAwesomeIconBefore) {
			let fontAwesomeIconBeforeClassName =
				fontAwesomeIconBefore.match(/class="(.*?)"/)[1];
			fontAwesomeIconBeforeClassName += ` vk_button_link_before`;
			const styleBefore = iconSizeBefore
				? ` style='font-size: ${iconSizeBefore}'`
				: '';
			iconBefore = `<i class="${fontAwesomeIconBeforeClassName}"${styleBefore}></i>`;
		}
		if (fontAwesomeIconAfter) {
			let fontAwesomeIconAfterClassName =
				fontAwesomeIconAfter.match(/class="(.*?)"/)[1];
			fontAwesomeIconAfterClassName += ` vk_button_link_after`;
			const styleAfter = iconSizeAfter
				? ` style='font-size: ${iconSizeAfter}'`
				: '';
			iconAfter = `<i class="${fontAwesomeIconAfterClassName}"${styleAfter}></i>`;
		}

		// inlineStyleからborderRadius・任意文字サイズを含む新しいスタイルオブジェクトを構築
		const btnInlineStyle = { ...inlineStyle };
		if (borderRadius) {
			btnInlineStyle.borderRadius = borderRadius;
		}
		// 任意の文字サイズが指定されている時だけインライン font-size を出力する。
		// 未指定の時は何も足さないので既存の保存済み HTML は不変。
		// Output an inline font-size only when a font size value is set; nothing is added
		// otherwise so the saved HTML stays unchanged for legacy blocks.
		if (fontSizeValue) {
			btnInlineStyle.fontSize = fontSizeValue;
		}

		// rel属性の設定
		let relValue = 'noopener';
		if (relAttribute) {
			relValue = relAttribute.includes('noopener')
				? relAttribute
				: `${relAttribute} noopener`;
		}

		return (
			/* eslint react/jsx-no-target-blank: 0 */
			/* eslint-disable-next-line jsx-a11y/anchor-is-valid -- linkToPost: href replaced server-side with permalink */
			<a
				href={linkToPost ? '#' : buttonUrl}
				style={btnInlineStyle}
				className={aClass}
				role={'button'}
				aria-pressed={true}
				target={buttonTarget ? '_blank' : null}
				rel={relValue}
				{...(linkToPost ? { 'data-vk-link-to-post': '1' } : {})}
			>
				<div className={'vk_button_link_caption'}>
					{parse(iconBefore)}
					{richText}
					{parse(iconAfter)}
				</div>
				{/*サブキャプションが入力された時のみ表示*/}
				{lbsubCaptionRichText ? (
					<p className={'vk_button_link_subCaption'}>
						{lbsubCaptionRichText}
					</p>
				) : (
					subCaption && (
						<p className={'vk_button_link_subCaption'}>
							{subCaption}
						</p>
					)
				)}
			</a>
		);
	}
}
