<?php


namespace ColibriWP\Theme\Customizer\Controls;


use ColibriWP\Theme\Core\Utils;
use ColibriWP\Theme\Translations;
use WP_Customize_Manager;

class ButtonGroupControl extends VueControl {

    public $type = 'colibri-button-group';

    public function __construct( WP_Customize_Manager $manager, $id, array $args = array() ) {
        parent::__construct( $manager, $id, $args );
    }

    public static function sanitize( $value, $control_data, $default = '' ) {
        $list_value = Utils::sanitizeSelectControl( $control_data, $value );
        $none_value = Utils::pathGet( $control_data, 'none_value', null );

        if ( ! $list_value && $none_value !== null && $none_value === $value ) {
            $list_value = $none_value;
        }


        return $list_value;
    }

    /**
     * @return bool|mixed
     */
    public function getNoneValue() {
        return $this->getParam( 'none_value' );
    }

    protected function content_template() {
        $this->printVueMountPoint();

        ?>
        <div class="customize-control-notifications-container"></div>
        <?php
    }

    protected function printVueContent() {
        ?>
        <div class="colibri-fullwidth">
            <div class="inline-elements-container">
                <div class="inline-element">
                    <# if ( data.label ) { #>
                    <span class="customize-control-title">{{{ data.label }}}</span>
                    <# } #>
                </div>

                <div class="inline-element fit">
                    <# if ( data.none_value ) { #>
                    <el-button @click="noneClicked"
                               type="text"><?php Translations::escHtmlE( 'none' ); ?></el-button>
                    <# } #>
                </div>
            </div>
            <colibri-group-control
                    :items="options"
                    :value="value"
                    :size="size"
                    @change="handleButtonClicked"></colibri-group-control>
        </div>
        <?php
    }
}