<?php
/**
 * Customizer Control: Radio Image
 *
 * Radio control with image previews instead of text labels.
 *
 * @package ella-parallax-one-page
 */

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

if ( ! class_exists( 'Ella_Parallax_One_Page_Radio_Image_Control' ) ) {

    /**
     * Radio Image control (modified radio with image choices)
     */
    class Ella_Parallax_One_Page_Radio_Image_Control extends WP_Customize_Control {

        /**
         * The type of customize control being rendered.
         *
         * @var string
         */
        public $type = 'ella_parallax_one_page-radio-image';

        /**
         * Tooltip text (optional)
         *
         * @var string
         */
        public $tooltip = '';

        /**
         * Additional CSS class for featured/important options
         *
         * @var string
         */
        public $feat_class = '';

        /**
         * Add custom parameters to JSON data.
         */
        public function to_json() {
            parent::to_json();

            if ( isset( $this->default ) ) {
                $this->json['default'] = $this->default;
            } else {
                $this->json['default'] = $this->setting->default;
            }

            $this->json['value']      = $this->value();
            $this->json['choices']    = $this->choices;
            $this->json['link']       = $this->get_link();
            $this->json['id']         = $this->id;
            $this->json['tooltip']    = $this->tooltip;
            $this->json['feat_class'] = $this->feat_class;

            $this->json['inputAttrs'] = '';
            foreach ( $this->input_attrs as $attr => $value ) {
                $this->json['inputAttrs'] .= $attr . '="' . esc_attr( $value ) . '" ';
            }
        }

        /**
         * Enqueue custom scripts and styles.
         */
        public function enqueue() {
            wp_enqueue_style(
                'ella_parallax_one_page-radio-image',
                get_stylesheet_directory_uri() . '/inc/custom-controls/radioimg/radio-image.css',
                array(),
                '1.0.0'
            );

            wp_enqueue_script(
                'ella_parallax_one_page-radio-image',
                get_stylesheet_directory_uri() . '/inc/custom-controls/radioimg/radio-image.js',
                array( 'jquery' ),
                '1.0.0',
                true
            );
        }

        /**
         * Render the control's content template (Underscore.js style).
         */
        protected function content_template() {
            ?>
            <# if ( data.tooltip ) { #>
                <a href="#" class="tooltip hint--left" data-hint="{{ data.tooltip }}">
                    <span class="dashicons dashicons-info"></span>
                </a>
            <# } #>

            <# if ( data.label || data.description ) { #>
                <label class="customizer-text">
                    <# 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 id="input_{{ data.id }}" class="image {{ data.feat_class }}">
                <# for ( key in data.choices ) { #>
                    <input {{{ data.inputAttrs }}} class="image-select" type="radio" value="{{ key }}" 
                           name="_customize-radio-{{ data.id }}" id="{{ data.id }}{{ key }}" {{{ data.link }}}
                           <# if ( data.value === key ) { #> checked="checked" <# } #>>
                        <label for="{{ data.id }}{{ key }}">
                            <img src="{{ data.choices[ key ] }}">
                            <span class="image-clickable"></span>
                        </label>
                    </input>
                <# } #>
            </div>
            <?php
        }

        /**
         * Render content (empty - using content_template instead).
         */
        protected function render_content() {}
    }
}