<?php

namespace TotalTheme\Customizer\Controls;

use WP_Customize_Control;

defined( 'ABSPATH' ) || exit;

/**
 * Custom Columns Control.
 */
class Grid_Columns extends WP_Customize_Control {

	/**
	 * The control type.
	 */
	public $type = 'wpex-columns';

	/**
	 * Render the content
	 */
	public function render_content() {
		$input_id       = "_customize-input-{$this->id}";
		$description_id = "_customize-description-{$this->id}";
		$field_val = $this->value();

		$medias = [
			'd'  => [
				'label' => esc_html__( 'Desktop', 'total' ),
				'icon'  => 'dashicons dashicons-desktop',
			],
			'tl' => [
				'label'       => esc_html__( 'Tablet Landscape', 'total' ),
				'icon'        => 'dashicons dashicons-tablet',
				'media_query' => '(max-width: 1024px)',
			],
			'tp' => [
				'label'       => esc_html__( 'Tablet Portrait', 'total' ),
				'icon'        => 'dashicons dashicons-tablet',
				'media_query' => '(max-width: 959px)',
			],
			'pl' => [
				'label'       => esc_html__( 'Phone Landscape', 'total' ),
				'icon'        => 'dashicons dashicons-smartphone',
				'media_query' => '(max-width: 767px)',
			],
			'pp' => [
				'label'       => esc_html__( 'Phone Portrait', 'total' ),
				'icon'        => 'dashicons dashicons-smartphone',
				'media_query' => '(max-width: 479px)',
			],
		];

		// Setup default values
		$defaults = [];
		foreach ( $medias as $key => $val ) {
			$defaults[ $key ] = '';
		}

		// If field val isn't an array then it's a single desktop column setting
		if ( ! is_array( $field_val ) ) {
			$field_val = [
				'd' => $field_val,
			];
		}

		// Parse field
		$field_val = wp_parse_args( $field_val, $defaults ); ?>

		<label for="<?php echo esc_attr( $input_id ); ?>"><span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span></label>

		<?php if ( ! empty( $this->description ) ) : ?>
			<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description">
				<?php echo wp_strip_all_tags( $this->description ); ?>
			</span>
		<?php endif; ?>

		<div class="totaltheme-customize-columns">

			<?php
			// Loop through medias and display fields
			foreach ( $medias as $key => $val ) : ?>

				<?php if ( 'd' === $key ) { ?>
					<div class="totaltheme-customize-columns__primary">
						<select id="<?php echo esc_attr( $input_id ); ?>" class="totaltheme-customize-columns__select" data-name="<?php echo esc_attr( $key ); ?>"><?php $this->show_options( $field_val[ $key ], false ); ?></select>
						<a href="#" class="totaltheme-customize-columns__toggle button button-secondary" role="button" aria-expanded="false" title="<?php esc_html_e( 'Toggle responsive options', 'total' ); ?>" aria-label="<?php esc_html_e( 'Toggle responsive options', 'total' ); ?>"><svg class="totaltheme-customize-columns__toggle-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M6 2h8c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1H6c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1zm7 12V4H7v10h6zM8 5h4l-4 5V5z"/></g></svg><svg class="totaltheme-customize-columns__toggle-icon totaltheme-customize-columns__toggle-icon--active" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6z"/></g></svg></a>
					</div>
				<?php } else { ?>
					<div class="totaltheme-customize-columns__extra totaltheme-customize-columns__hidden">
						<select id="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $key ); ?>" class="totaltheme-customize-columns__select" data-name="<?php echo esc_attr( $key ); ?>"><?php $this->show_options( $field_val[ $key ], true ); ?></select>
						<label for="<?php echo esc_attr( $this->id ); ?>_<?php echo esc_attr( $key ); ?>">
							<?php if ( isset( $val['icon'] ) ) {
							$icon_classes = 'totaltheme-customize-device-icon';
							if ( 'pl' === $key || 'tl' === $key ) {
								$icon_classes .= ' totaltheme-customize-device-icon--flip';
							}
							echo '<span class="' . esc_attr( $icon_classes ) . '" aria-hidden="true"><span class="' . esc_attr( $val['icon'] ) . '"></span></span>';
							}
							echo esc_html( $val['label'] );
							if ( ! empty( $val['media_query'] ) ) {
								echo '<br>' . esc_html(  $val['media_query'] );
							}
						?></label>
					</div>
				<?php } ?>
			<?php endforeach; ?>
		</div>
	<?php }

	/**
	 * Displays select field.
	 */
	public function show_options( $selected, $is_extra = false ) {
		if ( ! empty( $this->choices ) && ! $is_extra ) {
			$columns = $this->choices;
		} else {
			$columns = wpex_grid_columns();
			$columns = array_combine( $columns, $columns );
		}
		if ( $is_extra ) {
			echo '<option value ' . selected( $selected, '', false ) . '>' . esc_html__( 'Previous' , 'total' ) . '</option>';
		}
		foreach ( $columns as $column => $label ) {
			echo '<option value="' . esc_attr( $column ) . '" ' . selected( $selected, $column, false ) . '>' . esc_html( $label ) . '</option>';
		}

	}

}
