<?php

use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Typography;
use \Elementor\Group_Control_Border;

class TFSocialIcon_Widget extends \Elementor\Widget_Base {

	public function get_name() {
		return 'tfsocialicon';
	}

	public function get_title() {
		return esc_html__( 'TF Social Icon', 'themesflat-elementor' );
	}

	public function get_icon() {
		return 'eicon-social-icons';
	}

	public function get_categories() {
		return [ 'themesflat_addons' ];
	}

	protected function register_controls() {
		$this->general_setting();
		$this->style_social();
		$this->style_title();
	}

	protected function general_setting() {
		// Start Accordion
		$this->start_controls_section(
			'section_social_icon',
			[
				'label' => esc_html__( 'General Settings', 'themesflat-elementor' ),
			]
		);

		$this->add_control(
			'layout',
			[
				'label'       => esc_html__( 'Layout', 'themesflat-elementor' ),
				'type'        => \Elementor\Controls_Manager::SELECT,
				'default'     => 'horizontal',
				'description' => __( 'Please go to <a href="' . admin_url( 'customize.php' ) . '" target="_blank">Customize</a> >> General to configure Social Icon', 'themesflat-elementor' ),
				'options'     => [
					'horizontal' => 'Horizontal',
					'vertical'   => ' Vertical',
				],
			]
		);

		$this->add_control(
			'widget_title', [
				'label'     => esc_html__( 'Title', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::TEXT,
				'separator' => 'before',
				'default'   => esc_html__( 'Follow', 'themesflat-elementor' )
			]
		);
		$this->end_controls_section();
	}

	protected function style_social() {
		$this->start_controls_section( 'social_style_section', [
			'label' => esc_html__( 'Social', 'themesflat-elementor' ),
			'tab'   => Controls_Manager::TAB_STYLE,
		] );

		$this->add_control(
			'style',
			[
				'label'   => esc_html__( 'Style', 'themesflat-elementor' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					''        => 'Default',
					'classic' => 'Classic',
					'outline' => ' Outline',
				],
			]
		);

		$this->add_responsive_control( 'icon_spacing', [
			'label'      => esc_html__( 'Spacing Icon', 'themesflat-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'range'      => [
				'px' => [
					'min' => 0,
					'max' => 200,
				],
			],
			'selectors'  => [
				'{{WRAPPER}} .themesflat-socials' => '--themesflat-socials-spacing : {{SIZE}}{{UNIT}} !important',
			],
		] );

		$this->add_responsive_control( 'icon_size', [
			'label'      => esc_html__( 'Size Icon', 'themesflat-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'range'      => [
				'px' => [
					'min' => 0,
					'max' => 200,
				],
			],
			'selectors'  => [
				'{{WRAPPER}} .themesflat-socials' => 'font-size : {{SIZE}}{{UNIT}} !important',
			],
		] );

		$this->add_responsive_control( 'icon_size_wrapper', [
			'label'      => esc_html__( 'Size Icon Wrapper', 'themesflat-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'range'      => [
				'px' => [
					'min' => 0,
					'max' => 200,
				],
			],
			'condition'  => [
				'style' => [ 'classic', 'outline' ],
			],
			'selectors'  => [
				'{{WRAPPER}} .tf-social-icon.tf-social-outline .themesflat-socials,{{WRAPPER}} .tf-social-icon.tf-social-classic .themesflat-socials' => '--themesflat-socials-size-box-icon : {{SIZE}}{{UNIT}} !important',
			],
		] );

		$this->start_controls_tabs( 'icon_style_tabs' );

		$this->start_controls_tab( 'icon_style_normal_tab', [
			'label' => esc_html__( 'Normal', 'themesflat-elementor' ),
		] );
		$this->add_control(
			'icon_color',
			[
				'label'     => esc_html__( 'Color', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .themesflat-socials a' => 'color: {{VALUE}};' ],
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'border_icon',
				'selector' => '{{WRAPPER}} .tf-social-icon.tf-social-classic a,{{WRAPPER}} .tf-social-icon.tf-social-outline a',
			]
		);

		$this->add_control(
			'icon_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .tf-social-icon.tf-social-classic a,{{WRAPPER}} .tf-social-icon.tf-social-outline a' => 'background-color: {{VALUE}};' ],
				'condition' => [
					'style' => [ 'classic', 'outline' ],
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab( 'icon_style_hover_tab', [
			'label' => esc_html__( 'Hover', 'themesflat-elementor' ),
		] );
		$this->add_control(
			'icon_hover_color',
			[
				'label'     => esc_html__( 'Color', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .themesflat-socials a:hover' => 'color: {{VALUE}};' ],
			]
		);

		$this->add_control(
			'icon_hover_color_border_hover',
			[
				'label'     => esc_html__( 'Color Border', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .tf-social-icon.tf-social-outline a:hover' => 'border-color: {{VALUE}};' ],
				'condition' => [
					'style' => ['outline' ],
				],
			]
		);

		$this->add_control(
			'icon_hover_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .tf-social-icon.tf-social-classic a:hover,{{WRAPPER}} .tf-social-icon.tf-social-outline a:hover' => 'background-color: {{VALUE}};' ],
				'condition' => [
					'style' => [ 'classic', 'outline' ],
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function style_title() {
		$this->start_controls_section( 'title_style_section', [
			'label'     => esc_html__( 'Title', 'themesflat-elementor' ),
			'tab'       => Controls_Manager::TAB_STYLE,
			'condition' => [
				'widget_title!' => '',
			],
		] );

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);

		$this->add_control(
			'title_color',
			[
				'label'     => esc_html__( 'Color', 'themesflat-elementor' ),
				'type'      => \Elementor\Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [ '{{WRAPPER}} .title' => 'color: {{VALUE}};' ],
			]
		);


		$this->add_responsive_control( 'title_spacing', [
			'label'      => esc_html__( 'Spacing', 'themesflat-elementor' ),
			'type'       => Controls_Manager::SLIDER,
			'size_units' => [ 'px' ],
			'range'      => [
				'px' => [
					'min' => 0,
					'max' => 200,
				],
			],
			'selectors'  => [
				'{{WRAPPER}} .title' => '--themesflat-socials-title-spacing : {{SIZE}}{{UNIT}} !important',
			],
		] );

		$this->end_controls_section();
	}

	protected function render( $instance = [] ) {
		$settings      = $this->get_settings_for_display();
		$wrapper_class = array(
			'tf-social-icon',
			'tf-social-' . $settings['layout']
		);
		if ( $settings['style'] !== '' ) {
			$wrapper_class[] = 'tf-social-' . $settings['style'];
		}
		$this->add_render_attribute( 'wrapper_attr', 'class', $wrapper_class );
		?>
        <div <?php echo $this->get_render_attribute_string( 'wrapper_attr' ) ?>>
			<?php if ( $settings['widget_title'] !== '' ): ?>
                <span class="title"><?php echo esc_html( $settings['widget_title'] ) ?></span>
			<?php endif; ?>
			<?php themesflat_render_social(); ?>
        </div>
		<?php
	}

}