<?php


namespace ColibriWP\Theme\Customizer\Controls;

use WP_Customize_Manager;

class ControlsGroupControl extends VueControl {
	public $type = 'colibri-controls-group';

	protected $inline_content_template = true;

	protected $active_color   = '#1989fa';
	protected $inactive_color = '#949596';

	public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {

		if ( isset( $args['default'] ) ) {
			$args['default'] = ! ! intval( $args['default'] );
		}

		parent::__construct( $manager, $id, $args );
	}

	public static function sanitize( $value, $control_data, $default = '' ) {
		return 1;
	}

	public function json() {
		$json        = parent::json();
		$json['key'] = $this->id . '-controls-holder';

		return $json;
	}

	protected function printVueContent() {
		?>
		<el-switch

				v-if="show_toggle"
				v-model="value"
				active-color="{{ data.active_color }}"
				inactive-color="{{ data.inactive_color }}"
				@change="conditionChanged"
		>
		</el-switch>

		<el-popover
				placement="right-end"
				width="334"
				trigger="click"
				@show="onShow($event)">
			<div class="holder" data-holder-id="{{ data.key }}">
			</div>

			<el-button
					class="popover-toggler"
					:disabled="!value"
					type="text"
					@click="togglePopup"
					slot="reference"
					icon="el-icon-setting" circle>
			</el-button>


		</el-popover>


		<?php
	}
}



