<?php
/**
 * Product Gallery Widget - TAB_STYLE controls
 *
 * Included via require inside register_controls(). $this refers to the widget instance.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// ── Gallery Container ─────────────────────────────────────────────────────────

$this->start_controls_section(
	'container_style',
	[
		'label' => __( 'Gallery Container', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	]
);

$this->add_responsive_control(
	'container_padding',
	[
		'label'      => __( 'Padding', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%', 'em' ],
		'selectors'  => [
			'{{WRAPPER}} .ggm-product-gallery-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Background::get_type(),
	[
		'name'     => 'container_background',
		'label'    => __( 'Background', 'ggm-commerce' ),
		'types'    => [ 'classic', 'gradient' ],
		'selector' => '{{WRAPPER}} .ggm-product-gallery-container',
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	[
		'name'     => 'container_border',
		'label'    => __( 'Border', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-product-gallery-container',
	]
);

$this->add_responsive_control(
	'container_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggm-product-gallery-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'container_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-product-gallery-container',
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'container_hover_box_shadow',
		'label'    => __( 'Hover Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-product-gallery-container:hover',
	]
);

$this->add_control(
	'container_hover_lift',
	[
		'label'        => __( 'Hover Lift Effect', 'ggm-commerce' ),
		'type'         => \Elementor\Controls_Manager::SWITCHER,
		'label_on'     => __( 'Yes', 'ggm-commerce' ),
		'label_off'    => __( 'No', 'ggm-commerce' ),
		'return_value' => 'yes',
		'default'      => 'no',
	]
);

$this->add_responsive_control(
	'container_hover_lift_offset',
	[
		'label'      => __( 'Lift Offset', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'px' ],
		'range'      => [
			'px' => [
				'min' => 0,
				'max' => 20,
			],
		],
		'default'   => [
			'size' => 2,
			'unit' => 'px',
		],
		'condition' => [
			'container_hover_lift' => 'yes',
		],
		'selectors' => [
			'{{WRAPPER}} .ggm-product-gallery-container:hover' => 'transform: translateY(-{{SIZE}}{{UNIT}});',
		],
	]
);

$this->add_control(
	'container_hover_transition',
	[
		'label'      => __( 'Transition Duration', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'ms' ],
		'range'      => [
			'ms' => [
				'min'  => 0,
				'max'  => 1000,
				'step' => 50,
			],
		],
		'default'   => [
			'size' => 300,
			'unit' => 'ms',
		],
		'condition' => [
			'container_hover_lift' => 'yes',
		],
		'selectors' => [
			'{{WRAPPER}} .ggm-product-gallery-container' => 'transition: all {{SIZE}}ms ease;',
		],
	]
);

$this->end_controls_section();

// ── Main Image ────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'main_image_style',
	[
		'label' => __( 'Main Image', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	]
);

$this->add_control(
	'image_hover_effect',
	[
		'label'   => __( 'Hover Effect', 'ggm-commerce' ),
		'type'    => \Elementor\Controls_Manager::SELECT,
		'default' => 'none',
		'options' => [
			'none'  => __( 'None', 'ggm-commerce' ),
			'zoom'  => __( 'Zoom', 'ggm-commerce' ),
			'slide' => __( 'Slide', 'ggm-commerce' ),
		],
	]
);

$this->add_control(
	'image_hover_trigger',
	[
		'label'     => __( 'Hover Trigger', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::SELECT,
		'default'   => 'image',
		'options'   => [
			'image'     => __( 'Image Only', 'ggm-commerce' ),
			'container' => __( 'Entire Gallery Container', 'ggm-commerce' ),
		],
		'condition' => [
			'image_hover_effect!' => 'none',
		],
	]
);

$this->add_responsive_control(
	'main_image_height',
	[
		'label'      => __( 'Height', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'px', 'vh' ],
		'range'      => [
			'px' => [
				'min' => 200,
				'max' => 800,
			],
			'vh' => [
				'min' => 20,
				'max' => 80,
			],
		],
		'selectors' => [
			'{{WRAPPER}} .ggm-main-image' => 'height: {{SIZE}}{{UNIT}};',
		],
	]
);

$this->add_responsive_control(
	'main_image_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggm-main-image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'main_image_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-main-image img',
	]
);

$this->end_controls_section();

// ── Thumbnails ────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'thumbnail_style',
	[
		'label'     => __( 'Thumbnails', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => [
			'gallery_layout' => 'standard',
		],
	]
);

$this->add_responsive_control(
	'thumbnail_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggm-gallery-thumbnail img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Border::get_type(),
	[
		'name'     => 'thumbnail_border',
		'label'    => __( 'Border', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-gallery-thumbnail',
	]
);

$this->add_control(
	'thumbnail_active_border_color',
	[
		'label'     => __( 'Active Border Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-thumbnail.active' => 'border-color: {{VALUE}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Box_Shadow::get_type(),
	[
		'name'     => 'thumbnail_box_shadow',
		'label'    => __( 'Box Shadow', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-gallery-thumbnail img',
	]
);

$this->end_controls_section();

// ── Navigation ────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'navigation_style',
	[
		'label' => __( 'Navigation', 'ggm-commerce' ),
		'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
	]
);

$this->add_responsive_control(
	'nav_button_size',
	[
		'label'      => __( 'Button Size', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::SLIDER,
		'size_units' => [ 'px' ],
		'range'      => [
			'px' => [
				'min' => 20,
				'max' => 60,
			],
		],
		'default'   => [
			'size' => 40,
			'unit' => 'px',
		],
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-nav' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
		],
	]
);

$this->start_controls_tabs( 'nav_button_tabs' );

$this->start_controls_tab(
	'nav_button_normal',
	[
		'label' => __( 'Normal', 'ggm-commerce' ),
	]
);

$this->add_control(
	'nav_button_color',
	[
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-nav' => 'color: {{VALUE}};',
		],
	]
);

$this->add_control(
	'nav_button_background',
	[
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-nav' => 'background-color: {{VALUE}};',
		],
	]
);

$this->end_controls_tab();

$this->start_controls_tab(
	'nav_button_hover',
	[
		'label' => __( 'Hover', 'ggm-commerce' ),
	]
);

$this->add_control(
	'nav_button_hover_color',
	[
		'label'     => __( 'Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-nav:hover' => 'color: {{VALUE}};',
		],
	]
);

$this->add_control(
	'nav_button_hover_background',
	[
		'label'     => __( 'Background', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-gallery-nav:hover' => 'background-color: {{VALUE}};',
		],
	]
);

$this->end_controls_tab();

$this->end_controls_tabs();

$this->add_responsive_control(
	'nav_button_border_radius',
	[
		'label'      => __( 'Border Radius', 'ggm-commerce' ),
		'type'       => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors'  => [
			'{{WRAPPER}} .ggm-gallery-nav' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

$this->end_controls_section();

// ── Lightbox ──────────────────────────────────────────────────────────────────

$this->start_controls_section(
	'lightbox_style',
	[
		'label'     => __( 'Lightbox', 'ggm-commerce' ),
		'tab'       => \Elementor\Controls_Manager::TAB_STYLE,
		'condition' => [
			'enable_lightbox' => 'yes',
		],
	]
);

$this->add_control(
	'lightbox_overlay_color',
	[
		'label'     => __( 'Overlay Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-lightbox-overlay' => 'background-color: {{VALUE}};',
		],
	]
);

$this->add_group_control(
	\Elementor\Group_Control_Typography::get_type(),
	[
		'name'     => 'lightbox_counter_typography',
		'label'    => __( 'Counter Typography', 'ggm-commerce' ),
		'selector' => '{{WRAPPER}} .ggm-lightbox-counter',
	]
);

$this->add_control(
	'lightbox_counter_color',
	[
		'label'     => __( 'Counter Color', 'ggm-commerce' ),
		'type'      => \Elementor\Controls_Manager::COLOR,
		'selectors' => [
			'{{WRAPPER}} .ggm-lightbox-counter' => 'color: {{VALUE}};',
		],
	]
);

$this->end_controls_section();
