<?php
/**
 * Blog Over Customizer custom heading control class.
 * 
 * Replicates Bloglo theme's collapsible heading control style.
 *
 * @package Blog_Over
 */

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

if (!class_exists('WP_Customize_Control')) {
    return;
}

if (!class_exists('blog_over_Customizer_Control_Heading')):
    /**
     * Blog Over Customizer custom heading control class.
     */
    class blog_over_Customizer_Control_Heading extends WP_Customize_Control
    {

        /**
         * The control type.
         *
         * @var string
         */
        public $type = 'blog-over-heading';

        /**
         * Top spacer.
         *
         * @var boolean
         */
        public $space = true;

        /**
         * Heading style. Possible options are: regular-heading and sub-heading.
         *
         * @var string
         */
        public $style = 'regular-heading';

        /**
         * Toggler.
         *
         * @var boolean
         */
        public $toggle = true;

        /**
         * Enqueue control related scripts/styles.
         */
        public function enqueue()
        {
            wp_enqueue_style(
                'blog-over-heading-control',
                get_template_directory_uri() . '/assets/css/customizer-heading.css',
                array(),
                wp_get_theme()->get('Version')
            );

            wp_enqueue_script(
                'blog-over-heading-control',
                get_template_directory_uri() . '/assets/js/customizer-heading.js',
                array('jquery', 'customize-controls'),
                wp_get_theme()->get('Version'),
                true
            );
        }

        /**
         * Refresh the parameters passed to the JavaScript via JSON.
         */
        public function to_json()
        {
            parent::to_json();

            $this->json['space'] = (true === $this->space || 'true' === $this->space) ? ' top-spacer' : '';
            $this->json['toggleClass'] = (true === $this->toggle || 'true' === $this->toggle) ? ' toggle-heading' : '';
            $this->json['toggle'] = (true === $this->toggle || 'true' === $this->toggle);
            $this->json['style'] = $this->style;
        }

        /**
         * An Underscore (JS) template for this control's content.
         */
        protected function content_template()
        {
            ?>
            <# if ( data.space ) { #>
                <div class="blog-over-heading-top-space {{ data.style }}"></div>
                <# } #>
                    <div class="blog-over-heading-wrapper blog-over-control-wrapper{{ data.space }}{{ data.toggleClass }} {{ data.style }}">

                        <# if ( data.label ) { #>
                            <span class="blog-over-control-heading">{{{ data.label }}}</span>
                            <# } #>

                                <# if ( data.description ) { #>
                                    <i class="blog-over-info-icon"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                            viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                            class="feather feather-help-circle">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
                                            <line x1="12" y1="17" x2="12" y2="17"></line>
                                        </svg><span class="blog-over-tooltip top-right-tooltip">{{{ data.description }}}</span></i>
                                    <# } #>

                                        <# if ( data.toggle ) { #>
                                            <span class="blog-over-heading-toggle">
                                                <input type="checkbox" id="{{ data.id }}" name="{{ data.id }}" <# if ( data.value )
                                                    { #> checked="checked" <# } #>>

                                                    <label for="{{ data.id }}" aria-hidden="true">
                                                    </label>
                                            </span>
                                            <# } #>

                    </div><!-- END .blog-over-heading-wrapper -->
                    <?php
        }

    }
endif;
