<?php

if (! function_exists('blocksy_assemble_selector')) {
	return;
}

$offcanvas_behavior = blocksy_akg('offcanvas_behavior', $atts, 'panel');


// panel heading
$has_offcanvas_heading = blocksy_akg('has_offcanvas_heading', $atts, 'no');

if ($has_offcanvas_heading === 'yes') {
	blocksy_output_colors([
		'value' => blocksy_akg('offcanvas_heading_font_color', $atts),
		'default' => [
			'default' => [ 'color' => '#ffffff' ],
		],
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'variables' => [
			'default' => [
				'selector' => '#offcanvas .ct-panel-actions',
				'variable' => 'theme-text-color'
			],
		],
		'responsive' => true
	]);
}


$offcanvasBackground = blocksy_akg(
	'offcanvasBackground',
	$atts,
	blocksy_background_default_value([
		'backgroundColor' => [
			'default' => [
				'color' => 'rgba(18, 21, 25, 0.98)'
			],
		],
	])
);

$offcanvasBackdrop = blocksy_akg(
	'offcanvasBackdrop',
	$atts,
	blocksy_background_default_value([
		'backgroundColor' => [
			'default' => [
				'color' => 'CT_CSS_SKIP_RULE',
			],
		],
	])
);

// backdrop
blocksy_output_background_css([
	'selector' => blocksy_assemble_selector($root_selector),
	'css' => $css,
	'tablet_css' => $tablet_css,
	'mobile_css' => $mobile_css,
	'responsive' => true,
	'value' => $offcanvas_behavior === 'panel' ? $offcanvasBackdrop : $offcanvasBackground,
]);


// panel type
if ($offcanvas_behavior === 'panel') {

	blocksy_output_background_css([
		'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
			'selector' => $root_selector,
			'operation' => 'suffix',
			'to_add' => '.ct-panel-inner'
		])),
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'responsive' => true,
		'value' => $offcanvasBackground
	]);

	blocksy_output_box_shadow([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector[0] . ' #offcanvas'),
		'value' => blocksy_akg('headerPanelShadow', $atts, blocksy_box_shadow_value([
			'enable' => true,
			'h_offset' => 0,
			'v_offset' => 0,
			'blur' => 70,
			'spread' => 0,
			'inset' => false,
			'color' => [
				'color' => 'rgba(0, 0, 0, 0.35)',
			],
		])),
		'responsive' => true
	]);

	blocksy_output_responsive([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector),
		'variableName' => 'side-panel-width',
		'unit' => '',
		'value' => blocksy_akg('side_panel_width', $atts, [
			'desktop' => '500px',
			'tablet' => '65vw',
			'mobile' => '90vw',
		])
	]);
}


// alignment
$vertical_alignment = blocksy_akg('offcanvas_content_vertical_alignment', $atts, 'flex-start');

if ($vertical_alignment !== 'flex-start') {
	blocksy_output_responsive([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector),
		'variableName' => 'vertical-alignment',
		'unit' => '',
		'value' => $vertical_alignment,
	]);
}

$vertical_alignment = blocksy_expand_responsive_value($vertical_alignment);

$offcanvas_height = [
	'desktop' => 'auto',
	'tablet' => 'auto',
	'mobile' => 'auto'
];

if ($vertical_alignment['desktop'] === 'flex-start') {
	$offcanvas_height['desktop'] = '100%';
}

if ($vertical_alignment['tablet'] === 'flex-start') {
	$offcanvas_height['tablet'] = '100%';
}

if ($vertical_alignment['mobile'] === 'flex-start') {
	$offcanvas_height['mobile'] = '100%';
}

blocksy_output_responsive([
	'css' => $css,
	'tablet_css' => $tablet_css,
	'mobile_css' => $mobile_css,
	'selector' => blocksy_assemble_selector($root_selector),
	'variableName' => 'panel-content-height',
	'unit' => '',
	'value' => $offcanvas_height
]);

$horizontal_alignment = blocksy_akg(
	'offcanvasContentAlignment',
	$atts,
	'CT_CSS_SKIP_RULE'
);

if ($horizontal_alignment !== 'initial') {
	blocksy_output_responsive([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector),
		'variableName' => 'horizontal-alignment',
		'unit' => '',
		'value' => $horizontal_alignment,
	]);

	$text_horizontal_alignment = blocksy_map_values([
		'value' => $horizontal_alignment,
		'map' => [
			// 'initial' => 'CT_CSS_SKIP_RULE',
			'flex-end' => 'right'
		]
	]);

	if ($text_horizontal_alignment !== 'initial') {
		blocksy_output_responsive([
			'css' => $css,
			'tablet_css' => $tablet_css,
			'mobile_css' => $mobile_css,
			'selector' => blocksy_assemble_selector($root_selector),
			'variableName' => 'text-horizontal-alignment',
			'unit' => '',
			'value' => $text_horizontal_alignment,
		]);
	}

	if (is_array($horizontal_alignment)) {
		if (
			$horizontal_alignment['desktop'] === 'center'
			||
			$horizontal_alignment['tablet'] === 'center'
			||
			$horizontal_alignment['mobile'] === 'center'
		) {
			blocksy_output_responsive([
				'css' => $css,
				'tablet_css' => $tablet_css,
				'mobile_css' => $mobile_css,
				'selector' => blocksy_assemble_selector($root_selector),
				'variableName' => 'has-indentation',
				'unit' => '',
				'value' => [
					'desktop' => $horizontal_alignment['desktop'] === 'center' ? '0' : '1',
					'tablet' => $horizontal_alignment['tablet'] === 'center' ? '0' : '1',
					'mobile' => $horizontal_alignment['mobile'] === 'center' ? '0' : '1',
				]
			]);
		}
	}

}


// close button
$close_button_type = blocksy_akg('menu_close_button_type', $atts, 'type-1');

blocksy_output_colors([
	'value' => blocksy_akg('menu_close_button_color', $atts),
	'default' => [
		'default' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
		'hover' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
	],
	'css' => $css,
	'tablet_css' => $tablet_css,
	'mobile_css' => $mobile_css,
	'variables' => [
		'default' => [
			'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
				'selector' => $root_selector,
				'operation' => 'suffix',
				'to_add' => '.ct-toggle-close'
			])),
			'variable' => 'theme-icon-color'
		],

		'hover' => [
			'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
				'selector' => $root_selector,
				'operation' => 'suffix',
				'to_add' => '.ct-toggle-close:hover'
			])),
			'variable' => 'theme-icon-color'
		]
	],
	'responsive' => true
]);

if ($close_button_type === 'type-2') {
	blocksy_output_colors([
		'value' => blocksy_akg('menu_close_button_border_color', $atts),
		'default' => [
			'default' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
			'hover' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
		],
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'variables' => [
			'default' => [
				'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
					'selector' => $root_selector,
					'operation' => 'suffix',
					'to_add' => '.ct-toggle-close[data-type="type-2"]'
				])),
				'variable' => 'toggle-button-border-color'
			],

			'hover' => [
				'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
					'selector' => $root_selector,
					'operation' => 'suffix',
					'to_add' => '.ct-toggle-close[data-type="type-2"]:hover'
				])),
				'variable' => 'toggle-button-border-color'
			]
		],
		'responsive' => true
	]);
}

if ($close_button_type === 'type-3') {
	blocksy_output_colors([
		'value' => blocksy_akg('menu_close_button_shape_color', $atts),
		'default' => [
			'default' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
			'hover' => [ 'color' => Blocksy_Css_Injector::get_skip_rule_keyword('DEFAULT') ],
		],
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'variables' => [
			'default' => [
				'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
					'selector' => $root_selector,
					'operation' => 'suffix',
					'to_add' => '.ct-toggle-close[data-type="type-3"]'
				])),
				'variable' => 'toggle-button-background'
			],

			'hover' => [
				'selector' => blocksy_assemble_selector(blocksy_mutate_selector([
					'selector' => $root_selector,
					'operation' => 'suffix',
					'to_add' => '.ct-toggle-close[data-type="type-3"]:hover'
				])),
				'variable' => 'toggle-button-background'
			]
		],
		'responsive' => true
	]);
}


$menu_close_button_icon_size = blocksy_akg( 'menu_close_button_icon_size', $atts, 12 );

if ($menu_close_button_icon_size !== 12) {
	$css->put(
		blocksy_assemble_selector(blocksy_mutate_selector([
			'selector' => $root_selector,
			'operation' => 'suffix',
			'to_add' => '.ct-toggle-close'
		])),
		'--theme-icon-size: ' . $menu_close_button_icon_size . 'px'
	);
}


if ($close_button_type !== 'type-1') {
	$menu_close_button_border_radius = blocksy_akg( 'menu_close_button_border_radius', $atts, 5 );

	if ($menu_close_button_border_radius !== 5) {
		$css->put(
			blocksy_assemble_selector(blocksy_mutate_selector([
				'selector' => $root_selector,
				'operation' => 'suffix',
				'to_add' => '.ct-toggle-close'
			])),
			'--toggle-button-radius: ' . $menu_close_button_border_radius . 'px'
		);
	}
}


// panel offset
$has_offcanvas_offset = blocksy_akg('has_offcanvas_offset', $atts, 'no');

if($has_offcanvas_offset === 'yes' && $offcanvas_behavior === 'panel') {

	blocksy_output_responsive([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector),
		'variableName' => 'side-panel-offset',
		'value' => blocksy_akg( 'offcanvas_offset', $atts, 20 ),
	]);

	blocksy_output_spacing([
		'css' => $css,
		'tablet_css' => $tablet_css,
		'mobile_css' => $mobile_css,
		'selector' => blocksy_assemble_selector($root_selector),
		'property' => 'side-panel-border-radius',
		'value' => blocksy_akg( 'offcanvas_panel_radius', $atts,
			blocksy_spacing_value([
				'top' => '10px',
				'left' => '10px',
				'right' => '10px',
				'bottom' => '10px',
			])
		),
	]);

}