<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; }
use Elementor\Widget_Base;
use Sifency\Classes\Sifency_Addons_Widget_Base;
use Sifency\Classes\Sifency_Themebuilder_Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Icons_Manager;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Label_Content_Controls;
use Sifency\Traits\Sifency_Addons_TB_Separator_Content_Controls;
use Sifency\Traits\Render_Sifency_Addons_TB_Meta;
use Sifency\Traits\Sifency_Addons_Trio_Text_Style_Controls;
use Sifency\Traits\Sifency_Addons_Icon_Style_Controls;
class Sifency_Widget_Portfolio_Technologies extends Sifency_Themebuilder_Widget_Base {
	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Label_Content_Controls;
	use Sifency_Addons_TB_Separator_Content_Controls;
	use Render_Sifency_Addons_TB_Meta;
	use Sifency_Addons_Trio_Text_Style_Controls;
	use Sifency_Addons_Icon_Style_Controls;

	protected function get_allowed_template_types() {
		return 'portfolio';
	}
	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'          => 'sifency-portfolio-technologies',
			'title'         => 'Portfolio Technologies',
			'icon'          => 'eicon-meta-data',
			'category'      => array( 'sifency-portfolio-components' ),
			'keywords'      => array( 'portfolio', 'technologies', 'repeater', 'list', 'meta', 'dynamic', 'sifency' ),
			'style_depends' => array( 'sifency-typo-style' ),
		);}
	protected function register_controls() {
		$this->start_controls_section(
			'section_list_content',
			array(
				'label' => esc_html__( 'List', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'layout',
			array(
				'label'   => esc_html__( 'Layout', 'sifency-addons' ),
				'type'    => Controls_Manager::CHOOSE,
				'options' => array(
					'vertical'   => array(
						'title' => esc_html__( 'Vertical', 'sifency-addons' ),
						'icon'  => 'eicon-editor-list-ul',
					),
					'horizontal' => array(
						'title' => esc_html__( 'Horizontal', 'sifency-addons' ),
						'icon'  => 'eicon-ellipsis-h',
					),
				),
				'default' => 'horizontal',
			)
		);
		$this->add_control(
			'icon',
			array(
				'label'   => esc_html__( 'List Icon', 'sifency-addons' ),
				'type'    => Controls_Manager::ICONS,
				'default' => array(
					'value'   => 'fas fa-check',
					'library' => 'fa-solid',
				),
			)
		);
		$this->add_control(
			'divider',
			array(
				'label'        => esc_html__( 'Show Divider', 'sifency-addons' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Show', 'sifency-addons' ),
				'label_off'    => esc_html__( 'Hide', 'sifency-addons' ),
				'return_value' => 'yes',
				'condition'    => array( 'layout' => 'horizontal' ),
			)
		);
		$this->add_control(
			'divider_char',
			array(
				'label'     => esc_html__( 'Divider Character', 'sifency-addons' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => '|',
				'condition' => array(
					'layout'  => 'horizontal',
					'divider' => 'yes',
				),
			)
		);

		$this->add_responsive_control(
			'align',
			array(
				'label'     => esc_html__( 'Alignment', 'sifency-addons' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'sifency-addons' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors' => array( '{{WRAPPER}} .sifency-tech-list-wrapper' => 'text-align: {{VALUE}};' ),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_list_style',
			array(
				'label' => esc_html__( 'List Items', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'item_typography',
				'selector' => '{{WRAPPER}} .sifency-tech-list-item-text',
			)
		);
		$this->add_control(
			'item_text_color',
			array(
				'label'     => esc_html__( 'Text Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-tech-list-item-text' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'item_spacing_horizontal',
			array(
				'label'      => esc_html__( 'Spacing', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 50,
					),
				),
				'selectors'  => array( '{{WRAPPER}} .sifency-tech-list--horizontal .sifency-tech-list-item' => 'margin-right: {{SIZE}}{{UNIT}}; margin-bottom: 10px;' ),
				'condition'  => array( 'layout' => 'horizontal' ),
			)
		);
		$this->add_responsive_control(
			'item_spacing_vertical',
			array(
				'label'      => esc_html__( 'Spacing', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 50,
					),
				),
				'selectors'  => array( '{{WRAPPER}} .sifency-tech-list--vertical .sifency-tech-list-item' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
				'condition'  => array( 'layout' => 'vertical' ),
			)
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_divider_style',
			array(
				'label'     => esc_html__( 'Divider', 'sifency-addons' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'layout'  => 'horizontal',
					'divider' => 'yes',
				),
			)
		);
		$this->add_control(
			'divider_color',
			array(
				'label'     => esc_html__( 'Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-tech-list-divider' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'divider_spacing',
			array(
				'label'     => esc_html__( 'Spacing', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 50,
					),
				),
				'selectors' => array( '{{WRAPPER}} .sifency-tech-list-divider' => 'margin-left: {{SIZE}}{{UNIT}}; margin-right: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();
		$this->add_sifency_addons_label_content_controls();
		$this->add_sifency_addons_separator_content_controls();
		$this->add_sifency_addons_trio_text_style_controls();
		$this->add_sifency_addons_icon_style_controls(
			array(
				'selector'  => '.sifency-tech-list-icon',
				'condition' => array( 'icon[value]!' => '' ),
			)
		);
		$this->add_Sifency_Addons_Animation_Controls();
	}
	protected function render_dom( array $context ) {
		$wrapper_id = esc_attr( $context['dom_id'] );
		$settings   = $this->get_settings_for_display();

		$tech_list = sifency_get_field( 'portfolio_technologies_list' );

		if ( empty( $tech_list ) ) {
			if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
				$tech_list = array(
					array( 'tech_name' => 'WordPress' ),
					array( 'tech_name' => 'Elementor' ),
					array( 'tech_name' => 'PHP' ),
				);
			} else {
				return;
			}
		}

		$animation_manager = new Sifency_Addons_Animation_Manager( $settings );
		$animation_attrs   = $animation_manager->get_wrapper_attributes( array() );

		$this->add_render_attribute( 'list', 'class', 'sifency-tech-list' );
		$this->add_render_attribute( 'list', 'class', 'sifency-tech-list--' . $settings['layout'] );

		?>
		<div id="<?php echo esc_attr ( $wrapper_id ); ?>" class="sifency-tech-list-wrapper sifency-meta-item" <?php echo $animation_attrs; // phpcs:ignore ?>>
			<?php if ( 'yes' === $settings['show_label'] && ! empty( $settings['label_text'] ) ) : ?>
				<h3 class="sifency-tech-title sifency-label-style"><?php echo esc_html( $settings['label_text'] ); ?></h3>
			<?php endif; ?>
			
				<?php if ( 'yes' === $settings['show_separator'] && ! empty( $settings['separator_text'] ) ) : ?>
					<span class="sifency-separator-style">
						<?php echo esc_html( $settings['separator_text'] ); ?>
					</span>
				<?php endif; ?>

			<ul <?php echo wp_kses( $this->get_render_attribute_string( 'list' ), array() ); ?>>
				<?php
				$total_items = count( $tech_list );
				$counter     = 0;
				foreach ( $tech_list as $item ) :
					++$counter;
					if ( empty( $item['tech_name'] ) ) {
						continue;
					}
					?>
					<li class="sifency-tech-list-item">
						<?php if ( ! empty( $settings['icon']['value'] ) ) : ?>
							<span class="sifency-tech-list-icon"><?php Icons_Manager::render_icon( $settings['icon'], array( 'aria-hidden' => 'true' ) ); ?></span>
						<?php endif; ?>
						<span class="sifency-tech-list-item-text sifency-meta-style"><?php echo esc_html( $item['tech_name'] ); ?></span>
						<?php if ( 'yes' === $settings['divider'] && 'horizontal' === $settings['layout'] && $counter < $total_items ) : ?>
							<span class="sifency-tech-list-divider"><?php echo esc_html( $settings['divider_char'] ); ?></span>
						<?php endif; ?>
					</li>
				<?php endforeach; ?>
			</ul>
		</div>
		<?php
	}
}
