<?php if ( !defined( 'ABSPATH' ) ) exit;//PHPの宣言と直接アクセスの拒否

/* jQueryの読み込み */
function haup_tab_contents_script_include() {
	wp_enqueue_script(
		'tab-contents-script',
		plugin_dir_url( __FILE__ ) .'tab-contents.js', 
		array('jquery'),
		haup_plugin_version(),
		array( 
			'strategy'  => 'defer',
			'in_footer' => true, // Note: This is the default value.
		)
	);
}
add_action( 'wp_enqueue_scripts', 'haup_tab_contents_script_include' );


/***** パターンの登録 *****/
function haup_tab_contents_pattern_init(){
	$slug = 'hima-art-utility/tab-contents-pattern';
	$title = __('Tabs Content','hima-art-utility');


//翻訳対象テキスト
	$wrapper_group_name = __('Tabs Content','hima-art-utility');
	$tab1_link_title = __('Tab 1','hima-art-utility');
	$tab2_link_title = __('Tab 2','hima-art-utility');
	$content_wrapper_group_name = __('Tabs Content Group','hima-art-utility');
	$tab1_group_name = __('Tab Content 1','hima-art-utility');
	$tab2_group_name = __('Tab Content 2','hima-art-utility');

	$sample_text_a = __('This is an example of the tab content. After inserting any block here, delete these instruction blocks.','hima-art-utility');
	$sample_text_b = __('If you want to add tabs and tab content:','hima-art-utility');
	$sample_text_c = __('Duplicate the group of tab content 2 and specify a unique string in the HTML anchor','hima-art-utility');
	$sample_text_d = __('Add a list row to the list block at the top of this content and set link 1.','hima-art-utility');
	$sample_text_e = __('If you want to add another tab content within a page, do the following:','hima-art-utility');
	$sample_text_f = __('Populates tab content from a pattern','hima-art-utility');
	$sample_text_g = __('Change the HTML anchor of tab content 1 to something unique on the page','hima-art-utility');
	$sample_text_h = __('Change the HTML anchor of tab content 2 to something unique on the page','hima-art-utility');
	$sample_text_i = __('Change the link destination of the top list according to the HTML anchor of the tab content','hima-art-utility');
	$sample_text_j = __('Although it will work if there are multiple identical HTML anchors on a page, this is not a good HTML description and will have a negative impact on SEO, so make sure to make HTML anchors unique.','hima-art-utility');

	$pattern = [
		"title" => $title,
		"categories" => ["hima-art-utility/original-patterns"],
		"content" => '
<!-- wp:group {"metadata":{"name":"'.esc_html( $wrapper_group_name ).'"},"className":"ha-tabs","layout":{"type":"constrained"}} -->
<div class="wp-block-group ha-tabs">

	<!-- wp:list {"className":"ha-tab-links"} -->
	<ul class="wp-block-list ha-tab-links">
		<!-- wp:list-item {"className":"active"} -->
		<li class="active"><a href="#tab1">'.esc_html( $tab1_link_title ).'「#tab1」</a></li>
		<!-- /wp:list-item -->

		<!-- wp:list-item -->
		<li><a href="#tab2">'.esc_html( $tab2_link_title ).'「#tab2」</a></li>
		<!-- /wp:list-item --></ul>
	<!-- /wp:list -->

	<!-- wp:group {"metadata":{"name":"'.esc_html( $content_wrapper_group_name ).'"},"className":"ha-tab-content","layout":{"type":"constrained"}} -->
	<div class="wp-block-group ha-tab-content">

		<!-- wp:group {"metadata":{"name":"'.esc_html( $tab1_group_name ).'"},"className":"ha-tab active","layout":{"type":"constrained"}} -->
		<div id="tab1" class="wp-block-group ha-tab active">
			<!-- wp:heading {"level":3} -->
			<h3 class="wp-block-heading">'.esc_html( $tab1_group_name ).'</h3>
			<!-- /wp:heading -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_a ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_b ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:list -->
			<ul class="wp-block-list">
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_c ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_d ).'</li>
				<!-- /wp:list-item -->
			</ul>
			<!-- /wp:list -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_e ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:list -->
			<ul class="wp-block-list">
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_f ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_g ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_h ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_i ).'</li>
				<!-- /wp:list-item -->
			</ul>
			<!-- /wp:list -->
			<!-- wp:paragraph {"style":{"color":{"background":"#ffd0d0"}}} -->
			<p class="has-background" style="background-color:#ffd0d0">'.esc_html( $sample_text_j ).'</p>
			<!-- /wp:paragraph -->
		</div>
		<!-- /wp:group -->

		<!-- wp:group {"metadata":{"name":"'.esc_html( $tab2_group_name ).'"},"className":"ha-tab","style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"constrained"}} -->
		<div id="tab2" class="wp-block-group ha-tab" style="margin-top:0px;margin-bottom:0px">
			<!-- wp:heading {"level":3} -->
			<h3 class="wp-block-heading">【'.esc_html( $tab2_group_name ).'】</h3>
			<!-- /wp:heading -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_a ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_b ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:list -->
			<ul class="wp-block-list">
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_c ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_d ).'</li>
				<!-- /wp:list-item -->
			</ul>
			<!-- /wp:list -->
			<!-- wp:paragraph -->
			<p>'.esc_html( $sample_text_e ).'</p>
			<!-- /wp:paragraph -->
			<!-- wp:list -->
			<ul class="wp-block-list">
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_f ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_g ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_h ).'</li>
				<!-- /wp:list-item -->
				<!-- wp:list-item -->
				<li>'.esc_html( $sample_text_i ).'</li>
				<!-- /wp:list-item -->
			</ul>
			<!-- /wp:list -->
			<!-- wp:paragraph {"style":{"color":{"background":"#ffd0d0"}}} -->
			<p class="has-background" style="background-color:#ffd0d0">'.esc_html( $sample_text_j ).'</p>
			<!-- /wp:paragraph -->
		</div>
		<!-- /wp:group -->

	</div>
	<!-- /wp:group -->
</div>
<!-- /wp:group -->
		',
	];

	register_block_pattern($slug, $pattern);
}
add_action('admin_init', 'haup_tab_contents_pattern_init');

/***** スタイルコードの出力 *****/
function haup_tab_contents_pattern_style_init(){

/* 設定画面の色を適用 */
	//タブの文字色
	if(isset( GetOP01_addcontent()['tab-switch-text-color'] )){
		$text_color_pre = GetOP01_addcontent()['tab-switch-text-color'];
	}else{
		$text_color_pre = '#333';
	}

	//タブの背景色
	if(isset( GetOP01_addcontent()['tab-switch-bg-color'] )){
		$tab_bg_color_pre = GetOP01_addcontent()['tab-switch-bg-color'];
	}else{
		$tab_bg_color_pre = '#fff';
	}

	//枠線色
	if(isset( GetOP01_addcontent()['tab-switch-border-color'] )){
		$tab_border_color_pre = GetOP01_addcontent()['tab-switch-border-color'];
	}else{
		$tab_border_color_pre = '#ccc';
	}

	//選択時の文字色
	if(isset( GetOP01_addcontent()['tab-switch-selected-text-color'] )){
		$hover_text_color_pre = GetOP01_addcontent()['tab-switch-selected-text-color'];
	}else{
		$hover_text_color_pre = '#fff';
	}

	//選択時のタブ背景色
	if(isset( GetOP01_addcontent()['tab-switch-selected-bg-color'] )){
		$hover_bg_color_pre = GetOP01_addcontent()['tab-switch-selected-bg-color'];
	}else{
		$hover_bg_color_pre = '#000';
	}


/*** フィルターフックが効くようにする ***/
//色を変数化
	$variables = array(
		'text-color' => $text_color_pre,
		'tab-bg-color' => $tab_bg_color_pre,
		'tab-border-bolor' => $tab_border_color_pre,
		'tab-selected-text-color' => $hover_text_color_pre,
		'tab-selected-bg-color' => $hover_bg_color_pre,
	);

//フィルターフックで変更可能にする
	$color_valiables = apply_filters('haup_tab_content_change_color',$variables);

//フィルターの結果が空でない場合は適用し、空の場合は設定画面の設定に従う
	//タブの文字色
	if (!empty($color_valiables['text-color'])) {
		$text_color = $color_valiables['text-color'];
	}else{
		$text_color = $text_color_pre;
	}

	//タブの背景色
	if (!empty($color_valiables['tab-bg-color'])) {
		$tab_bg_color = $color_valiables['tab-bg-color'];
	}else{
		$tab_bg_color = $tab_bg_color_pre;
	}

	//枠線色
	if (!empty($color_valiables['tab-border-bolor'])) {
		$tab_border_color = $color_valiables['tab-border-bolor'];
	}else{
		$tab_border_color = $tab_border_color_pre;
	}

	//選択時の文字色
	if (!empty($color_valiables['tab-selected-text-color'])) {
		$hover_text_color = $color_valiables['tab-selected-text-color'];
	}else{
		$hover_text_color = $hover_text_color_pre;
	}

	//選択時のタブの背景色
	if (!empty($color_valiables['tab-selected-bg-color'])) {
		$hover_bg_color = $color_valiables['tab-selected-bg-color'];
	}else{
		$hover_bg_color = $hover_bg_color_pre;
	}

	//タブを等幅にする
	if(isset( GetOP01_addcontent()['tab-switch-equal-width'] ) && GetOP01_addcontent()['tab-switch-equal-width'] == 1){
		$equal_width = '.ha-tab-links li {flex: 1;}';
	}else{
		$equal_width = '';
	}


//スタイルコードをまとめる
$custom_css_pre = '
/* HAUP Tab Contents Style */
.ha-tabs {
	width: 100%;
}

.ha-tab-links {
	list-style: none;
	padding: 0;
	display: flex;
	margin-bottom:0;
}


.ha-tab-links li {
	padding: 4px 12px;
	background: '.$tab_bg_color.';
	border: 1px solid '.$tab_border_color.';
	text-align: center;
	position: relative;
	border-bottom:none;
	margin-left:-1px;
}

ul.ha-tab-links {
    margin-left: 1px;
}

.ha-tab-links li.active {
	background: '.$hover_bg_color.';
}

/* リンク要素を上下左右中央に配置 */
.ha-tab-links li a {
    text-decoration: none;
    color:'.$text_color.';
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
}

.ha-tab-links li.active a {
	text-decoration: none;
	color:'.$hover_text_color.';
}

/* タブ全体をクリック可能にする */
.ha-tab-links li a:after{
    position: absolute;
    content: "";
    z-index: 2;
    inset: 0;
}

'.$equal_width.'

.ha-tab-content {
	border-top: 4px solid '.$tab_border_color.';
	padding: 20px;
	margin-top:0;
}

.ha-tab {
	display: none;
}

.ha-tab.active {
	display: block;
}


';

//タブを除去
$custom_css_deltab = preg_replace('/\t+/', '', $custom_css_pre);
//改行を除去
$custom_css = str_replace(PHP_EOL, '', $custom_css_deltab);

	wp_add_inline_style( 'haup-front-and-blocks-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'haup_tab_contents_pattern_style_init');

/* カラー変更用のフィルターフックの使用例
function tab_contents_color_change_filter(){
	$variables['text-color'] = '#333';//タブの文字色
	$variables['tab-bg-color'] = '#fff';//タブの背景色
	$variables['tab-border-bolor'] = '#ccc';//枠線色
	$variables['tab-selected-text-color'] = '#fff';//選択時の文字色
	$variables['tab-selected-bg-color'] = '#000';//選択時のタブ背景色

	return $variables;
}
add_filter('haup_tab_content_change_color','tab_contents_color_change_filter');
*/