<?php

namespace Mesmerize;

class GradientControlPro extends \Kirki_Customize_Control
{
    public $type = 'gradient-control-pro';
    public $button_label = '';


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

         $this->button_label = __('Select Gradient', 'mesmerize');
    }


    public function enqueue()
    {
        wp_enqueue_script(mesmerize_get_text_domain().'-gradient-control-pro',  mesmerize_pro_uri("/customizer/assets/js") . "/gradient-control.js");
    }


    public function to_json()
    {
        parent::to_json();

        if(is_string($this->json['value'])) {
            $gradient = json_decode($this->json['value'], true);
        } else {
            $gradient = $this->json['value'];
        }

        $this->json['button_label'] = $this->button_label;
        $this->json['gradient'] = mesmerize_get_gradient_value($gradient['colors'], $gradient['angle']);
        $this->json['angle'] = intval($gradient['angle']);
    }


    protected function content_template()
    {
        ?>
			<label for="{{ data.settings['default'] }}-button">
			<# if ( data.label ) { #>
				<span class="customize-control-title">{{ data.label }}</span>
			<# } #>
			<# if ( data.description ) { #>
				<span class="description customize-control-description">{{{ data.description }}}</span>
			<# } #>
		</label>

        <div class="webgradient-icon-container">
            <div class="webgradient-icon-preview">
                <div class="webgradient" style="background: {{data.gradient}}"></i>
            </div>
            <div class="webgradient-controls">
                <button type="button" class="button upload-button control-focus" id="_customize-button-{{ data.id }}">{{{ data.button_label }}}</button>
            </div>
        </div>



        <div class="fic-icon-container" style="display: flex;flex-flow: wrap;">
            <input type="hidden" value="{{ data.value }}" name="_customize-input-{{ data.id }}" {{{ data.link }}} />
            <div style="flex:1;">
                <span class="customize-control-title">Colors</span>
                <div class="colors">
                </div>
            </div>
            <div style="flex:1;">
                <span class="customize-control-title">Angle</span>
                <input class="angle" value="{{data.angle}}">
            </div>
        </div>
		<?php

    }
}
