<?php
    /**
     * Page Table of Content Section
     * 
     * @package Blog Bee
     * @since 1.0.0
     */
    namespace BBE\Customizer\Section;

    use BBE\Customizer\Section\Section as Section;
    use BBE\Customizer\Theme_Defaults as Theme_Defaults;
    use BBE\Helpers as Helpers;

    use function esc_html__;
    use function esc_attr;

    if( ! class_exists( __NAMESPACE__ . '\\Page_Table_Of_Content' ) ) {
        /**
         * Page_Table_Of_Content class
         */
        class Page_Table_Of_Content extends Section {
            /**
             * Section Id
             * 
             * @since 1.0.0
             * @var string
             */
            public static $id = 'bbe-page-toc';

            /**
             * Register controls
             * 
             * @since 1.0.0
             */
            public function register_controls() {
                $this->tab = 'general';
                $this->add_section( 'page_toc_section' );
                $this->add_control( 'page_toc_section_tab' );
                $this->add_control( 'page_toc_title' );
                $this->add_control( 'page_toc_headings_to_include' );
                $this->add_control( 'page_toc_view' );
                $this->add_control( 'page_toc_list_style' );
                $this->add_control( 'page_toc_expand_by_default' );
                $this->add_control( 'page_toc_is_fixed' );
                $this->add_control( 'page_toc_position' );
                $this->add_control( 'page_toc_width' );
                $this->tab = 'design';
                $this->add_control( 'page_toc_title_typography' );
                $this->add_control( 'page_toc_list_typography' );
                $this->add_control( 'page_toc_color' );
                $this->add_control( 'page_toc_active_color' );
                $this->add_control( 'page_toc_background' );
                $this->add_control( 'page_toc_border' );
            }

            /**
             * Settings
             * 
             * @since 1.0.0
             */
            public function get_settings( $id = '' ) {
                $settings = [
                    'page_toc_section_tab' =>  [
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_title' =>  [
                        'sanitize_callback' =>  'sanitize_text_field',
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_headings_to_include' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_multiselect' ],
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_view' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_radio_tab' ],
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_list_style' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_select' ],
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_expand_by_default' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_toggle' ],
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_is_fixed' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_toggle' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_position' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_radio_tab' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_width' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_range' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_title_typography' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_typography' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_list_typography' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_typography' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_active_color' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_color' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_color' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_color' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_background' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_color' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                    'page_toc_border' =>  [
                        'sanitize_callback' =>  [ $this, 'sanitize_color' ],
                        'transport' =>  'postMessage',
                        'default'   =>  Theme_Defaults::get_defaults( $id )
                    ],
                ];
                return $id ? $settings[ $id ] : $settings;
            }

            /**
             * Controls
             * 
             * @since 1.0.0
             */
            public function get_controls( $id = '' ) {
                $controls = [
                    'page_toc_section' =>  [
                        'title' =>  esc_html__( 'Table of Content', 'blog-bee' ),
                        'panel' =>  'blog_panel',
                        'active_callback'   =>  function() {
                            return Theme_Defaults::get_theme_option( 'page_show_table_of_content' );
                        },
                        'section_to_open' =>  'page_section'
                    ],
                    'page_toc_section_tab' =>  [
                        'type'  =>  'section-tab',
                        'fields'    =>  Helpers::get_customizer_section_tabs()
                    ],
                    'page_toc_title' =>  [
                        'label' =>  esc_html__( 'Title', 'blog-bee' ),
                        'type'  =>  'bbe-text'
                    ],
                    'page_toc_headings_to_include' =>  [
                        'label' =>  esc_html__( 'Headings to Include', 'blog-bee' ),
                        'type'  =>  'multiselect',
                        'fields'    =>  [
                            [
                                'label' =>  esc_html__( 'H1', 'blog-bee' ),
                                'value' =>  'h1'
                            ],
                            [
                                'label' =>  esc_html__( 'H2', 'blog-bee' ),
                                'value' =>  'h2'
                            ],
                            [
                                'label' =>  esc_html__( 'H3', 'blog-bee' ),
                                'value' =>  'h3'
                            ],
                            [
                                'label' =>  esc_html__( 'H4', 'blog-bee' ),
                                'value' =>  'h4'
                            ],
                            [
                                'label' =>  esc_html__( 'H5', 'blog-bee' ),
                                'value' =>  'h5'
                            ],
                            [
                                'label' =>  esc_html__( 'H6', 'blog-bee' ),
                                'value' =>  'h6'
                            ],
                        ]
                    ],
                    'page_toc_view' =>  [
                        'label' =>  esc_html__( 'View', 'blog-bee' ),
                        'type'  =>  'radio-tab',
                        'fields'    =>  [
                            [
                                'label' =>  esc_html__( 'Tree', 'blog-bee' ),
                                'value' =>  'tree'
                            ],
                            [
                                'label' =>  esc_html__( 'Flat', 'blog-bee' ),
                                'value' =>  'flat'
                            ]
                        ]
                    ],
                    'page_toc_list_style' =>  [
                        'label' =>  esc_html__( 'List Style', 'blog-bee' ),
                        'type'  =>  'bbe-select',
                        'choices'    =>  [
                            'none'  =>  esc_html__( 'None', 'blog-bee' ),
                            'decimal'  =>  esc_html__( 'Decimal(1, 1.1, 1.1.1)', 'blog-bee' ),
                            'roman'  =>  esc_html__( 'Roman(I, II, III)', 'blog-bee' ),
                            'dot'  =>  esc_html__( 'Dot', 'blog-bee' ),
                        ]
                    ],
                    'page_toc_expand_by_default' =>  [
                        'label' =>  esc_html__( 'Expand by Default', 'blog-bee' ),
                        'description'   =>  esc_html__( 'Enable to expand the table of contents by default.', 'blog-bee' ),
                        'type'  =>  'toggle-button',
                    ],
                    'page_toc_is_fixed' =>  [
                        'label' =>  esc_html__( 'Fixed', 'blog-bee' ),
                        'description'   =>  esc_html__( 'Enable to make it fixed.', 'blog-bee' ),
                        'type'  =>  'toggle-button',
                    ],
                    'page_toc_position' =>  [
                        'label' =>  esc_html__( 'Position', 'blog-bee' ),
                        'fields'    =>  [
                            [
                                'label' =>  esc_html__( 'Left', 'blog-bee' ),
                                'value' =>  'left'
                            ],
                            [
                                'label' =>  esc_html__( 'Right', 'blog-bee' ),
                                'value' =>  'right'
                            ],
                        ],
                        'type'  =>  'radio-tab',
                        'display_block' =>  true,
                        'conditions'    =>  [
                            'relation'  =>  'AND',
                            'rules' =>  [
                                [
                                    'setting'   =>  'page_toc_is_fixed',
                                    'operator'  =>  '==',
                                    'value' =>  true
                                ]
                            ]
                        ]
                    ],
                    'page_toc_width' =>  [
                        'label' =>  esc_html__( 'Width', 'blog-bee' ),
                        'type'  =>  'bbe-number',
                        'show_unit' =>  true,
                        'responsive' =>  true,
                        'input_attrs'   =>  [
                            'px'    =>  [
                                'min'   =>  100,
                                'max'   =>  1000,
                                'step'  =>  1
                            ],
                            '%'    =>  [
                                'min'   =>  5,
                                'max'   =>  100,
                                'step'  =>  1
                            ],
                        ],
                        'conditions'    =>  [
                            'relation'  =>  'AND',
                            'rules' =>  [
                                [
                                    'setting'   =>  'page_toc_is_fixed',
                                    'operator'  =>  '==',
                                    'value' =>  true
                                ]
                            ]
                        ]
                    ],
                    'page_toc_title_typography'  =>  [
                        'label' =>  esc_html__( 'Title Typography', 'blog-bee' ),
                        'type'  =>  'typography'
                    ],
                    'page_toc_list_typography'   =>  [
                        'label' =>  esc_html__( 'List Typography', 'blog-bee' ),
                        'type'  =>  'typography'
                    ],
                    'page_toc_active_color' =>  [
                        'label' =>  esc_html__( 'Active Text Color', 'blog-bee' ),
                        'type'  =>  'bbe-color',
                    ],
                    'page_toc_color' =>  [
                        'label' =>  esc_html__( 'Text Color', 'blog-bee' ),
                        'type'  =>  'bbe-color',
                        'include_hover' =>  true
                    ],
                    'page_toc_background'    =>  [
                        'label' =>  esc_html__( 'Background', 'blog-bee' ),
                        'type'  =>  'bbe-color',
                        'color_types'   =>  [ 'solid', 'gradient' ]
                    ],
                    'page_toc_border'    =>  [
                        'label' =>  esc_html__( 'Border Color', 'blog-bee' ),
                        'type'  =>  'bbe-color',
                    ],
                ];
                return $id ? $controls[ $id ] : $controls;
            }

            /**
             * Defaults
             * 
             * @since 1.0.0
             */
            public function set_defaults() {
                Theme_Defaults::update_theme_defaults( [
                    'page_toc_section_tab' =>  'general',
                    'page_toc_title' =>  'Table of Content',
                    'page_toc_headings_to_include' =>  'h2 h3',
                    'page_toc_view' =>  'tree',
                    'page_toc_list_style' =>  'decimal',
                    'page_toc_expand_by_default' =>  true,
                    'page_toc_is_fixed' =>  false,
                    'page_toc_position' =>  'right',
                    'page_toc_width' =>  $this->get_responsive( '300px', '260px', '200px' ),
                    'page_toc_title_typography'  =>  $this->get_typography([
                        'font_size' =>  $this->get_responsive( '10px', '10px', '10px' ),
                        'line_height'   =>  $this->get_responsive( 1.3, 1.3, 1.3 ),
                        'letter_spacing'    =>  $this->get_responsive( '0.12em', '0.12em', '0.12em' ),
                        'text_transform'    =>  'uppercase'
                    ]),
                    'page_toc_list_typography'   =>  $this->get_typography([
                        'font_size' =>  $this->get_responsive( '13px', '13px', '13px' ),
                        'line_height'   =>  $this->get_responsive( 1.45, 1.45, 1.45 ),
                        'letter_spacing'    =>  $this->get_responsive( '0.01em', '0.01em', '0.01em' )
                    ]),
                    'page_toc_active_color'    =>  $this->get_color(),
                    'page_toc_color' =>  [
                        'initial'   =>  $this->get_color(),
                        'hover' =>  $this->get_color()
                    ],
                    'page_toc_background'    =>  $this->get_color(),
                    'page_toc_border'    =>  $this->get_color(),
                ] );
            }

            /**
             * Get dynamic css args
             * 
             * @since 1.0.0
             */
            public function get_dynamic_css_args(): array {
                $dynamic_args = [
                    'page_toc_title'  =>  [
                        'selector'  =>  '.bbe-single-toc .section-head .label',
                        'parent'  =>  '.bbe-single-toc .section-head'
                    ],
                    'page_toc_is_fixed'  =>  [
                        'selector'  =>  '.bbe-single-toc',
                        'on'    =>  'fixed'
                    ],
                    'page_toc_position'  =>  [
                        'selector'  =>  '.bbe-single-toc',
                        'prefix'    =>  'position--'
                    ],
                    'page_toc_width' =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_width' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_width' ),
                        'selector'  =>  '.bbe-single-toc',
                        'property'  =>  'width'
                    ],
                    'page_toc_title_typography'  =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_title_typography' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_title_typography' ),
                        'selector'  =>  '.bbe-single-toc'
                    ],
                    'page_toc_list_typography'   =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_list_typography' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_list_typography' ),
                        'selector'  =>  '.bbe-single-toc'
                    ],
                    'page_toc_active_color' =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_active_color' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_active_color' ),
                        'selector'  =>  '.bbe-single-toc',
                        'property'  =>  '--bbe-site-color'
                    ],
                    'page_toc_color' =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_color' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_color' ),
                        'selector'  =>  '.bbe-single-toc',
                        'property'  =>  '--bbe-site-color'
                    ],
                    'page_toc_background'    =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_background' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_background' ),
                        'selector'  =>  '.bbe-single-toc',
                        'property'  =>  '--bbe-site-color'
                    ],
                    'page_toc_border'    =>  [
                        'value' =>  Theme_Defaults::get_theme_option( 'page_toc_border' ),
                        'default' =>  Theme_Defaults::get_defaults( 'page_toc_border' ),
                        'selector'  =>  '.bbe-single-toc',
                        'property'  =>  '--bbe-site-color'
                    ],
                ];
                return $dynamic_args;
            }

            /**
             * Render HTML
             * 
             * @since 1.0.0
             */
            public function render_html() {
                $block_class[] = self::$id;
                $block_class[] = 'bbe-toc';
                $fixed = Theme_Defaults::get_theme_option( 'page_toc_is_fixed' );
                $block_class[] = 'view--' . Theme_Defaults::get_theme_option( 'page_toc_view' );
                $block_class[] = 'list--' . Theme_Defaults::get_theme_option( 'page_toc_list_style' );
                $title = Theme_Defaults::get_theme_option( 'page_toc_title' );
                if( $fixed ) {
                    $block_class[] = 'fixed';
                    $block_class[] = 'position--' . Theme_Defaults::get_theme_option( 'page_toc_position' );
                }
                $page_toc_class[] = 'table-of-content';
                $expand_by_default = Theme_Defaults::get_theme_option( 'page_toc_expand_by_default' );
                if( $expand_by_default ) $page_toc_class[] = 'open';

                $icon_attrs = [
                    'type'  =>  'icon',
                    'value' =>  'fa-solid fa-chevron-' . ( $expand_by_default ? 'down' : 'up' ),
                    'tag'   =>  'span',
                    'class' =>  'toc-icon'
                ];
                ?>

                    <div class="<?php echo esc_attr( implode( ' ', $block_class ) ); ?>">

                        <div class="toc-header">

                            <?php 
                                Helpers::get_section_head( $title );

                                echo Helpers::get_icon_html( $icon_attrs );
                            ?>

                        </div>

                        <div class="<?php echo esc_attr( implode( ' ', $page_toc_class ) ); ?>">
                            
                        </div>

                    </div><!-- .bbe-page-toc -->

                <?php
            }
        }
        Page_Table_Of_Content::get_instance();
    }