<?php

    namespace Pixebuilder\Element;
    
    // prevent direct file access
	if( !defined( 'ABSPATH' ) ) exit;

    class Tab extends Item{

        static function get_name(){
            return 'tab';
        }

        static function get_title(){
            return esc_html__('Tab', 'pixebuilder');
        }

        static function get_icon(){
            return 'tab';
        }

        static function item_class($settings){
            if( !empty($settings['tab-alignment']) && $settings['tab-alignment'] == 'vertical' ){
                return 'pixe-style-vertical';
            }
            return '';
        }

        static function item_data($atts, $settings){
            if( !empty($settings['tab-action']) ){
                $atts['action'] = $settings['tab-action'];
            }
            return $atts;
        }
        
        static function render_content($settings){
            $ret = '';
            if( !empty($settings['_tab']) ){
                $title_tag = empty($settings['title-tag'])? 'span': $settings['title-tag'];
                $title_atts = array();
                if( !empty($settings['title-typo']['preset']) ){
                    $title_atts['typo-preset'] = $settings['title-typo']['preset'];
                }

                // title
                $count = 0;
                $ret .= '<div class="pixe-item-tab-title" ' . pixe_get_data_atts($title_atts) . ' >';
                $ret .= '<div class="pixe-text-wrap" >';
                foreach( $settings['_tab'] as $tab ){
                    $ret .= '<div ' . ($count == 0? 'class="pixe-active" ': '') . ' data-tab="' . esc_attr($count) . '" >';
                    if( !empty($tab['data']['icon']['icon']) ){
                        $ret .= pixe_get_icon($tab['data']['icon']['icon']);
                    }
                    if( !empty($tab['title']) ){
                        $ret .= '<' . $title_tag . ' class="pixe-text" >' . $tab['title'] . '</' . $title_tag . '>';
                    }
                    $ret .= '</div>';
                    
                    $count++;
                }
                $ret .= '</div>';
                $ret .= '</div>';

                // content
                
                $count = 0;
                $ret .= '<div class="pixe-item-tab-content" >';
                foreach( $settings['_tab'] as $tab ){
                    $ret .= '<div class="pixe-tab-container' . ($count == 0? ' pixe-active': '') . '" data-tab="' . esc_attr($count) . '" >';
                    if( !empty($tab['content']) ){
                        $ret .= pixe_get_builder_content($tab['content']);
                    }
                    $ret .= '</div>';

                    $count++;
                }
                $ret .= '</div>';
            }

            return $ret;
        }

    }

    \Pixe_Builder::register_element('Pixebuilder\Element\Tab');
    
    // register tab style
    function tab_style(){
?>
.pixe-item-tab-title{ display: flex; flex-wrap: wrap; }
.pixe-item-tab-title .pixe-text-wrap{ display: flex; flex-wrap: wrap; }
.pixe-item-tab-title [data-tab]{ position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 30px; cursor: pointer; overflow: hidden;
    background-size: cover; background-position: center; transition: background 300ms, border 300ms, border-radius 300ms, box-shadow 300ms;
    mask-position: center; -webkit-mask-position: center; mask-size: cover; -webkit-mask-size: cover; }
.pixe-item-tab-title [data-tab] .pixe-text{ color: var(--pixe--color--heading); margin: 0; padding: 0; transition: color 300ms; }
.pixe-item-tab-title [data-tab].pixe-active,
.pixe-item-tab-title [data-tab]:hover{ background-color: #f5f5f5; }
.pixe-item-tab-content{ padding: 10px; background-color: #f5f5f5;  }
.pixe-item-tab-content > [data-tab]{ display: none; opacity: 0; }
.pixe-item-tab-content > [data-tab].pixe-active{ display: flex; opacity: 1; }
.pixe-item-tab.pixe-style-vertical{ display: flex; width: 100%; }
.pixe-item-tab.pixe-style-vertical .pixe-item-tab-content{ flex-grow: 1; }
.pixe-item-tab.pixe-style-vertical .pixe-item-tab-title{ flex-direction: column; flex-shrink: 0; }
.pixe-item-tab.pixe-style-vertical .pixe-item-tab-title [data-tab]{ width: 100%; }
<?php pixe_device_css('mobile', 'media-tag', true);  ?>
    .pixe-item-tab.pixe-style-vertical{ flex-wrap: wrap; }
    .pixe-item-tab.pixe-style-vertical .pixe-item-tab-title{ width: 100%; }
<?php echo '}'; ?>
<?php
    }
    \Pixe_Dependency::get()->register_style('tab', 'Pixebuilder\Element\tab_style');

    // register tab script
    function tab_core_script(){
?>
$.fn.pixeItemTab = function(){
    $(this).each(function(){
        var tab = $(this);
        var action = $(this).attr('data-action');
        var event = 'click';
        if( action == 'hover' ){
            event = 'mouseenter';
        }

        $(this).children('.pixe-item-tab-title').on(event, '[data-tab]', function(){
            if( $(this).hasClass('pixe-active') ){ return; }

            var activeTitle = $(this);
            var tabId = activeTitle.attr('data-tab');
            activeTitle.addClass('pixe-active').siblings().removeClass('pixe-active');

            var activeContent = tab.children('.pixe-item-tab-content').children('[data-tab="' + tabId + '"]');
            activeContent.css({display: 'flex'}).animate({opacity: 1}, 300);
            activeContent.siblings().css({display: 'none', opacity: 0}).removeClass('pixe-active');
        });
    });
}
<?php
    }
    function tab_script(){
?>
$(document).ready(function(){ $('.pixe-item-tab').pixeItemTab(); });
<?php
    }
    \Pixe_Dependency::get()->register_core_script('tab', 'Pixebuilder\Element\tab_core_script');
    \Pixe_Dependency::get()->register_script('tab', 'Pixebuilder\Element\tab_script');
