<?php
namespace CSSIgniter\Ignition\Elementor\Widget;

class Google_Maps extends \Elementor\Widget_Base {
	public function get_script_depends() {

		$api_key = get_option( 'elementor_google_maps_api_key ' );

		wp_register_script( 'google-maps-api', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key, array(), IGNITION_ELEMENTOR_WIDGETS_VERSION, false );

		wp_register_script( 'ignition-elementor-google-maps', plugin_dir_url( __DIR__ ) . 'assets/js/googlemaps.min.js', array( 'google-maps-api' ), IGNITION_ELEMENTOR_WIDGETS_VERSION, true );

		return array(
			'ignition-elementor-google-maps',
		);

	}

	public function get_name() {
		return 'ignition-google-maps';
	}

	public function get_title() {
		return __( 'Google Maps', 'ignition-elementor-widgets' );
	}

	public function get_icon() {
		return 'eicon-google-maps';
	}

	public function get_categories() {
		return array( 'ignition-elementor-widgets' );
	}

	protected function register_controls() {
		$this->start_controls_section(
			'section_map',
			array(
				'label' => __( 'Google Maps', 'ignition-elementor-widgets' ),
			)
		);

		$this->add_control(
			'latitude',
			array(
				'label'       => __( 'Latitude', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'placeholder' => '',
				'default'     => '37.585636',
				'label_block' => true,
			)
		);

		$this->add_control(
			'longitude',
			array(
				'label'       => __( 'Longitude', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXT,
				'placeholder' => '',
				'default'     => '26.127548',
				'label_block' => true,
			)
		);

		$this->add_control(
			'zoom',
			array(
				'label'   => __( 'Zoom Level', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SLIDER,
				'default' => array(
					'size' => 10,
				),
				'range'   => array(
					'px' => array(
						'min' => 1,
						'max' => 20,
					),
				),
			)
		);

		$this->add_responsive_control(
			'height',
			array(
				'type'      => \Elementor\Controls_Manager::SLIDER,
				'label'     => __( 'Height', 'ignition-elementor-widgets' ),
				'range'     => array(
					'px' => array(
						'min' => 40,
						'max' => 1440,
					),
				),
				'devices'   => array( 'desktop', 'tablet', 'mobile' ),
				'default'   => array(
					'size' => 400,
					'unit' => 'px',
				),
				'selectors' => array(
					'{{WRAPPER}} .ignition-google-map' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'marker',
			array(
				'label' => __( 'Custom Marker', 'ignition-elementor-widgets' ),
				'type'  => \Elementor\Controls_Manager::MEDIA,
			)
		);

		$this->add_control(
			'info',
			array(
				'label'       => __( 'Map Info Window', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXTAREA,
				'placeholder' => __( 'Fill any info you want to display when the map marker is clicked.', 'ignition-elementor-widgets' ),
			)
		);

		require_once \CSSIgniter\Ignition\Elementor\Ignition_Elementor_Widgets()->plugin_path() . 'includes/map-styles.php';

		$this->add_control(
			'style',
			array(
				'label'   => __( 'Map Style', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::SELECT,
				'default' => '',
				'options' => \ignition_elementor_get_map_styles(),
			)
		);

		$this->add_control(
			'user_style',
			array(
				'label'       => __( 'User Style', 'ignition-elementor-widgets' ),
				'type'        => \Elementor\Controls_Manager::TEXTAREA,
				'placeholder' => __( 'Paste the javascript style array from your preferred Snazzy Maps style here.', 'ignition-elementor-widgets' ),
			)
		);

		$this->add_control(
			'prevent_scroll',
			array(
				'label'     => __( 'Prevent Scroll', 'ignition-elementor-widgets' ),
				'type'      => \Elementor\Controls_Manager::SWITCHER,
				'default'   => 'yes',
				'label_on'  => __( 'Yes', 'ignition-elementor-widgets' ),
				'label_off' => __( 'No', 'ignition-elementor-widgets' ),
			)
		);

		$this->add_control(
			'view',
			array(
				'label'   => __( 'View', 'ignition-elementor-widgets' ),
				'type'    => \Elementor\Controls_Manager::HIDDEN,
				'default' => 'traditional',
			)
		);

		$this->end_controls_section();
	}

	protected function render() {
		$settings = $this->get_settings();

		if ( empty( $settings['latitude'] ) || empty( $settings['longitude'] ) ) {
			return;
		}

		if ( 0 === absint( $settings['zoom']['size'] ) ) {
			$settings['zoom']['size'] = 10;
		}

		$pointer_events = 'yes' === $settings['prevent_scroll'] ? 'false' : 'true';

		$data_error = '<p style="text-align: center">' . __( "If you can't see the map please try adding a map API key under Elementor > Settings > Integrations .", 'ignition-elementor-widgets' ) . '</p>';

		$map_style = ! empty( $settings['user_style'] ) ? $settings['user_style'] : \ignition_elementor_get_map_style( $settings['style'] );

		$map_height_bc = false;

		if ( empty( $settings['height_tablet'] ) && empty( $settings['height_mobile'] ) ) {
			$map_height_bc = 'height:' . $settings['height']['size'] . 'px';
		}

		?>
		<div id="map-<?php echo esc_attr( $this->get_id() ); ?>" class="ignition-google-map" style="width:100%;background-color: grey;<?php echo esc_attr( $map_height_bc ); ?>" data-latitude="<?php echo esc_attr( $settings['latitude'] ); ?>" data-longitude="<?php echo esc_attr( $settings['longitude'] ); ?>" data-zoom="<?php echo esc_attr( $settings['zoom']['size'] ); ?>" data-style="<?php echo esc_attr( $map_style ); ?>" data-scroll="<?php echo esc_attr( $pointer_events ); ?>" data-icon="<?php echo esc_url( $settings['marker']['url'] ); ?>" data-info="<?php echo esc_html( $settings['info'] ); ?>" data-error="<?php echo esc_attr( $data_error ); ?>"></div>
		<?php
	}

	protected function content_template() {}
}
