<?php
$button_ele = '{{WRAPPER}} > .elementor-widget-container > .el-button';
$ele = '{{WRAPPER}} > .elementor-widget-container > .el-button > .el-btn';
    
$params[ 'text' ] = array(
    'type' => 'text',
    'std' => 'Click me',
    'placeholder' => 'Click me',
    'title' => 'Button text',
    
    'section' => 'general',
    'section_title' => 'General',
);

$params[ 'icon' ] = array(
    'title' => 'Icon',
    'type' => 'icon',
);

$params[ 'image_icon' ] = array(
    'title' => 'Image Icon',
    'type' => 'media',
);

$params[ 'image_icon_width' ] = array(
    'title' => 'Image width',
    'type' => 'size',
    
    'std_unit' => 'px',
    'std_size' => 10,
    'px_max' => 60,
    'px_min' => 2,
    
    'selectors' => [
        '{{WRAPPER}} .image-icon' => 'width:{{SIZE}}{{UNIT}};',
    ],
);

$params[ 'align' ] = array(
    'type' => 'align',
    'options' => [ 'left', 'center', 'right' ],
    'title' => 'Alignment',
);

$params[ 'size_type' ] = array(
    'title' => 'Button size type',
    'type' => 'select',
    'options' => [
        'flexible' => 'Flexible size',
        'fixed' => 'Fixed size',
    ],
    'std' => 'flexible',
);

$params[ 'padding' ] = array(
    'type' => 'size',
    'title' => 'Padding',
    
    'std_unit' => 'px',
    'std_size' => 20,
    'px_max' => 100,
    'px_min' => 0,
    
    'selectors' => [
        $button_ele . ' .btn-flexible' => 'padding-left: {{SIZE}}{{UNIT}}; padding-right: {{SIZE}}{{UNIT}};',
    ],
    'condition' => array( 'size_type[value]' => 'flexible' ),
);

$params[ 'size' ] = array(
    'type' => 'size',
    'title' => 'Size',
    'std_unit' => 'px',
    'std_size' => 80,
    'px_max' => 300,
    'px_min' => 0,
    'selectors' => [
        $button_ele . ' .btn-fixed' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
    ],
    'condition' => array( 'size_type[value]' => 'fixed' ),
);

$params[ 'btn_border_radius' ] = array(
    'type' => 'size',
    'title' => 'Border radius',
    'std_unit' => 'px',
    'std_size' => 0,
    'px_max' => 150,
    'px_min' => 0,
    'selectors' => [
        $ele => 'border-radius: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'typography' ] = array(
    'type' => 'typography',
    'title' => 'Button Typography',
    'selector' => $ele,
);

/* actions
------------------------------ */
$params[ 'action' ] = array(
    'type' => 'select',
    'options' => [
        'link' => 'Opens link',
        'popup' => 'Opens popup',
    ],
    'std' => 'link',
    'title' => 'Action',
    
    'section' => 'action',
    'section_title' => 'Action',
);

$params[ 'link' ] = array(
    'type' => 'url',
    'title' => 'Button link',
    'condition' => array( 'action[value]' => 'link' ),
);

$blocks_dropdown = [ 0 => 'Choose popup' ];
$blocks_dropdown += fox_get_block_list();

$params[ 'popup_id' ] = array(
    'type' => 'select',
    'options' => $blocks_dropdown,
    'std' => 0,
    'title' => 'Choose popup',
    'condition' => array( 'action[value]' => 'popup' ),
);

$params[ 'popup_position' ] = array(
    'type' => 'select',
    'options' => [
        'left' => 'Sidebar Left',
        'right' => 'Sidebar Right',
        'fullscreen' => 'Fullscreen',
        'center' => 'Center',
    ],
    'std' => 'center',
    'title' => 'Popup position',
    'condition' => array( 'action[value]' => 'popup' ),
);

$params[ 'popup_width' ] = array(
    'type' => 'size',
    'title' => 'Popup width',
    'condition' => array(
        'action[value]' => 'popup',
        'popup_position[value]' => [ 'left', 'right' ]
    ),
    
    'std_unit' => 'px',
    'std_size' => 400,
    'px_max' => 1200,
    'px_min' => 100,
    'selectors' => [
        '.popup-has-size' => 'width: {{SIZE}}{{UNIT}};',
    ],
);

// theoretically, we don't need this, we can adjust the source content
// but this is very convenient and practical
$params[ 'popup_padding' ] = array(
    'type' => 'size',
    'title' => 'Popup padding',
    'condition' => array(
        'action[value]' => 'popup',
    ),
    'std_unit' => 'px',
    'std_size' => 0,
    'px_max' => 200,
    'px_min' => 0,
    'selectors' => [
        '.popup-content' => 'padding: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'popup_bg' ] = array(
    'type' => 'color',
    'title' => 'Popup background',
    'condition' => array( 'action[value]' => 'popup' ),
    'selectors' => [
        '{{WRAPPER}} .el-popup' => 'background: {{VALUE}};',    
    ],
);

$params[ 'popup_close_color' ] = array(
    'type' => 'color',
    'title' => 'Close button color',
    'condition' => array( 'action[value]' => 'popup' ),
    'selectors' => [
        '{{WRAPPER}} .popup-close' => 'color: {{VALUE}};',    
    ],
);

$params[ 'popup_overlay_bg' ] = array(
    'type' => 'color',
    'title' => 'Popup overlay background',
    'condition' => array( 'action[value]' => 'popup' ),
    'selectors' => [
        '{{WRAPPER}} .el-popup-overlay' => 'background: {{VALUE}};',    
    ],
);

/* style
------------------------------ */
$params[ 'color' ] = array(
    'type' => 'color',
    'title' => 'Button Color',
    'selectors' => [
        $ele => 'color: {{VALUE}};',    
    ],
    
    'section' => 'style',
    'section_title' => 'Style',
    'section_tab' => 'style',
    
    'tabs' => 'btn_style',
    'tab' => 'normal',
    'tab_title' => 'Normal',
);

$params[ 'bg' ] = array(
    'type' => 'color',
    'title' => 'Button background',
    'selectors' => [
        $ele => 'background: {{VALUE}};',    
    ],
);

$params[ 'border_width' ] = array(
    'type' => 'size',
    'title' => 'Button border width',
    'std_unit' => 'px',
    'std_size' => 0,
    'px_max' => 20,
    'px_min' => 0,
    'selectors' => [
        $ele => 'border-width: {{SIZE}}{{UNIT}};',
    ],
);

$params[ 'border_color' ] = array(
    'type' => 'color',
    'title' => 'Button border color',
    'selectors' => [
        $ele => 'border-color: {{VALUE}};',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

// hover
$params[ 'hover_color' ] = array(
    'type' => 'color',
    'title' => 'Button Hover Color',
    'selectors' => [
        $ele .':hover' => 'color: {{VALUE}};',    
    ],
    
    'tab' => 'hover',
    'tab_title' => 'Hover',
);

$params[ 'hover_bg' ] = array(
    'type' => 'color',
    'title' => 'Button hover background',
    'selectors' => [
        $ele .':hover' => 'background: {{VALUE}};',    
    ],
);

$params[ 'hover_border_color' ] = array(
    'type' => 'color',
    'title' => 'Button hover border',
    'selectors' => [
        $ele .':hover' => 'border-color: {{VALUE}};',    
    ],
);

$params[ 'hover_translate' ] = array(
    'type' => 'size',
    'title' => 'Hover translate',
    
    'std_size' => 0,
    'std_unit' => 'px',
    'px_min' => 0,
    'px_max' => 20,
    
    'selectors' => [
        $ele .':hover' => 'transform: translate(0, -{{SIZE}}{{UNIT}});',
    ],
);

$params[] = [
    'type' => 'tab_close',
];

$params[] = [
    'type' => 'tabs_close',
];