<?php
/**
 * QR Code element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * QR Code element class.
 */
class X_Qr_Code extends \Bricks\Element {

	/**
	 * Element properties.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xqrcode';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ion-ios-keypad';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Element scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xQrCode' );

	/**
	 * Script localization status.
	 *
	 * @var bool
	 */
	private static $script_localized = false;


	/**
	 * Get element label.
	 *
	 * @return string
	 */
	public function get_label() {
		return esc_html__( 'QR Code', 'bricksextras' );
	}

	/**
	 * Get element keywords.
	 *
	 * @return array
	 */
	public function get_keywords() {
		return array( 'qr', 'code' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['dots'] = array(
			'title' => esc_html__( 'Dots', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['corners'] = array(
			'title' => esc_html__( 'Corners', 'bricksextras' ),
			'tab'   => 'content',
		);

		$this->control_groups['config'] = array(
			'title' => esc_html__( 'Configure', 'bricks' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$this->controls['data'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Data', 'bricks' ),
			'type'        => 'textarea',
			'placeholder' => esc_url( home_url( '/' ) ),
		);

		$this->controls['shape'] = array(
			'tab'         => 'content',
			'inline'      => true,
			'label'       => esc_html__( 'Shape', 'bricks' ),
			'type'        => 'select',
			'options'     => array(
				'square' => esc_html__( 'Square', 'bricks' ),
				'circle' => esc_html__( 'Circle', 'bricks' ),
			),
			'placeholder' => esc_html__( 'Square', 'bricks' ),
		);

		$this->controls['outputType'] = array(
			'tab'         => 'content',
			'inline'      => true,
			'label'       => esc_html__( 'Render', 'bricks' ),
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'canvas' => esc_html__( 'Canvas', 'bricks' ),
				'svg'    => 'SVG',
			),
			'placeholder' => esc_html__( 'Canvas', 'bricks' ),
		);

		// QR Options.
		$this->controls['errorCorrectionLevel'] = array(
			'tab'         => 'content',
			'group'       => 'config',
			'label'       => esc_html__( 'Error correction', 'bricksextras' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'L' => esc_html__( 'Low', 'bricks' ) . ' (~7%)',
				'M' => esc_html__( 'Medium', 'bricks' ) . ' (~15%)',
				'Q' => esc_html__( 'Quartile', 'bricksextras' ) . ' (~25%)',
				'H' => esc_html__( 'High', 'bricks' ) . ' (~30%)',
			),
			'placeholder' => esc_html__( 'Medium', 'bricks' ) . ' (~15%)',
		);

		$this->controls['mode'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Mode', 'bricks' ),
			'inline'      => true,
			'type'        => 'select',
			'group'       => 'config',
			'options'     => array(
				'Numeric'      => esc_html__( 'Numeric', 'bricks' ),
				'Alphanumeric' => esc_html__( 'Alphanumeric', 'bricksextras' ),
				'Byte'         => esc_html__( 'Byte', 'bricksextras' ),
				'Kanji'        => esc_html__( 'Kanji', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Byte', 'bricksextras' ),
		);

		// Dots Group.

		$this->controls['dotsSep'] = array(
			'tab'   => 'content',
			'group' => 'dots',
			'label' => esc_html__( 'Dots', 'bricks' ),
			'type'  => 'separator',
		);

		$this->controls['dotsColor'] = array(
			'tab'         => 'content',
			'group'       => 'dots',
			'label'       => esc_html__( 'Color', 'bricks' ),
			'type'        => 'color',
			'placeholder' => '#000000',
		);

		$this->controls['dotsType'] = array(
			'tab'         => 'content',
			'group'       => 'dots',
			'label'       => esc_html__( 'Type', 'bricks' ),
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'square'         => esc_html__( 'Square', 'bricks' ),
				'rounded'        => esc_html__( 'Rounded', 'bricksextras' ),
				'dots'           => esc_html__( 'Dots', 'bricks' ),
				'classy'         => esc_html__( 'Classy', 'bricksextras' ),
				'classy-rounded' => esc_html__( 'Classy Rounded', 'bricksextras' ),
				'extra-rounded'  => esc_html__( 'Extra Rounded', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Square', 'bricks' ),
		);

		$this->controls['cornerSquareSep'] = array(
			'tab'   => 'content',
			'group' => 'corners',
			'label' => esc_html__( 'Corner squares', 'bricksextras' ),
			'type'  => 'separator',
		);

		// Corners Group.
		$this->controls['cornersSquareColor'] = array(
			'tab'   => 'content',
			'group' => 'corners',
			'label' => esc_html__( 'Color', 'bricks' ),
			'type'  => 'color',
		);

		$this->controls['cornersSquareType'] = array(
			'tab'     => 'content',
			'group'   => 'corners',
			'label'   => esc_html__( 'Type', 'bricks' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'square'         => esc_html__( 'Square', 'bricks' ),
				'dot'            => esc_html__( 'Dots', 'bricks' ),
				'extra-rounded'  => esc_html__( 'Extra Rounded', 'bricksextras' ),
				'rounded'        => esc_html__( 'Rounded', 'bricksextras' ),
				'dots'           => esc_html__( 'Dots', 'bricks' ),
				'classy'         => esc_html__( 'Classy', 'bricksextras' ),
				'classy-rounded' => esc_html__( 'Classy Rounded', 'bricksextras' ),
			),
		);

		$this->controls['cornerDotSep'] = array(
			'tab'   => 'content',
			'group' => 'corners',
			'label' => esc_html__( 'Corner dots', 'bricksextras' ),
			'type'  => 'separator',
		);

		$this->controls['cornersDotColor'] = array(
			'tab'   => 'content',
			'group' => 'corners',
			'label' => esc_html__( 'Color', 'bricks' ),
			'type'  => 'color',
		);

		$this->controls['cornersDotType'] = array(
			'tab'     => 'content',
			'group'   => 'corners',
			'label'   => esc_html__( 'Type', 'bricksextras' ),
			'type'    => 'select',
			'inline'  => true,
			'options' => array(
				'square'         => esc_html__( 'Square', 'bricks' ),
				'dot'            => esc_html__( 'Dots', 'bricks' ),
				'rounded'        => esc_html__( 'Rounded', 'bricksextras' ),
				'dots'           => esc_html__( 'Dots', 'bricks' ),
				'classy'         => esc_html__( 'Classy', 'bricksextras' ),
				'classy-rounded' => esc_html__( 'Classy Rounded', 'bricksextras' ),
				'extra-rounded'  => esc_html__( 'Extra Rounded', 'bricksextras' ),
			),
		);
	}


	/**
	 * Enqueue element scripts.
	 */
	public function enqueue_scripts() {

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x-qr-code', BRICKSEXTRAS_URL . 'components/assets/css/qr-code.css', array(), \BricksExtras\Plugin::VERSION );
		}

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'qr-code-styling', BRICKSEXTRAS_URL . 'components/assets/js/qr-code-styling.js', array( 'bricks-scripts' ), '1.9.2', true );

		wp_enqueue_script( 'x-qr-code', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'qr-code' ) . '.js', array( 'qr-code-styling' ), \BricksExtras\Plugin::VERSION, true );

		if ( ! self::$script_localized ) {

			wp_localize_script(
				'x-qr-code',
				'xQrCode',
				array(
					'Instances' => array(),
				)
			);

			self::$script_localized = true;

		}
	}

	/**
	 * Render element.
	 */
	public function render() {

		$data = isset( $this->settings['data'] ) ? $this->render_dynamic_data( $this->settings['data'] ) : esc_url( home_url( '/' ) );

		$config = array(
			'data' => $data,
		);

		if ( isset( $this->settings['margin'] ) ) {
			$config['margin'] = intval( $this->settings['margin'] );
		}

		if ( isset( $this->settings['shape'] ) ) {
			$config['shape'] = $this->settings['shape'];
		}

		if ( isset( $this->settings['outputType'] ) ) {
			$config['type'] = $this->settings['outputType'];
		}

		if ( isset( $this->settings['errorCorrectionLevel'] ) ) {
			$config['qrOptions']['errorCorrectionLevel'] = $this->settings['errorCorrectionLevel'];
		}

		if ( isset( $this->settings['mode'] ) ) {
			$config['qrOptions']['mode'] = $this->settings['mode'];
		}

		$dots_options = array();

		if ( isset( $this->settings['dotsType'] ) ) {
			$dots_options['type'] = $this->settings['dotsType'];
		}

		if ( isset( $this->settings['shape'] ) && 'circle' === $this->settings['shape'] ) {
			$dots_options['roundSize'] = true;
		}

		if ( isset( $this->settings['dotsColor'] ) ) {
			$dots_options['color'] = $this->settings['dotsColor'];
		}

		$config['dotsOptions'] = $dots_options;

		$corners_square_options = array();

		if ( isset( $this->settings['cornersSquareColor'] ) ) {
			$corners_square_options['color'] = $this->settings['cornersSquareColor'];
		}

		if ( isset( $this->settings['cornersSquareType'] ) ) {
			$corners_square_options['type'] = $this->settings['cornersSquareType'];
		}

		if ( ! empty( $corners_square_options ) ) {
			$config['cornersSquareOptions'] = $corners_square_options;
		}

		if ( isset( $this->settings['cornersDotColor'] ) ) {
			$corners_dot_options['color'] = $this->settings['cornersDotColor'];
		}

		if ( isset( $this->settings['cornersDotType'] ) ) {
			$corners_dot_options['type'] = $this->settings['cornersDotType'];
		}

		if ( ! empty( $corners_dot_options ) ) {
			$config['cornersDotOptions'] = $corners_dot_options;
		}

		$this->set_attribute( '_root', 'data-x-qr-code', wp_json_encode( $config ) );
		$this->set_attribute( '_root', 'data-x-qr-init', false );

		// Generate and set a unique identifier for this instance.
		$identifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		echo "<div {$this->render_attributes( '_root' )}></div>";
	}
}
