<?php
$resource = Wpw::inst()->resource();
$formatter = Wpw::inst()->formatter();

$primary_text_color = '#555';
$divider_color = 'rgba(0,0,0,.3)';
$accent_color = '#ffab00';
$secondary_color = 'rgba(0,0,0,0.6)';
$disabled_color = 'rgba(0,0,0,.3)';

$class_name = !empty($config['class_name'])
    ? '.' . $config['class_name']
    : '.project-input_range-primary';

$default_paddings = [
    'top' => [
        'number' => 10,
    ],
    'bottom' => [
        'number' => 10,
    ],
    'right' => [
        'number' => 10,
    ],
    'left' => [
        'number' => 10,
    ],
];

$default_border = [
    'top' => [
        'number' => 1,
    ],
    'bottom' => [
        'number' => 1,
    ],
    'right' => [
        'number' => 1,
    ],
    'left' => [
        'number' => 1,
    ],
];

$default_border_radius = [];

/**
 * Form defaults
 */
// indents
$form_default_padding =  $default_paddings;
$form_default_margins = [];

// border
$form_default_border_style = 'solid';
$form_default_border_model = $default_border;
$form_default_border_radius = $default_border_radius;

$form_default_border_style_hover =  'solid';
$form_default_border_model_hover = $default_border;
$form_default_border_radius_hover = $default_border_radius;

$form_default_border_style_focus =  'solid';
$form_default_border_model_focus =  $default_border;
$form_default_border_radius_focus =  $default_border_radius;

// colors
$form_default_border_color =  $divider_color;
$form_default_control_color =  $accent_color;

$form_default_border_color_hover =  $divider_color;
$form_default_control_color_hover =  $accent_color;

$form_default_border_color_focus =  $divider_color;
$form_default_control_color_focus =  $accent_color;

// shadow

$form_default_bs_hl =  '';
$form_default_bs_vl =  '';
$form_default_bs_br =  '';
$form_default_bs_sr = '';
$form_default_bs_color =  '';

$form_default_bs_hl_hover =  '';
$form_default_bs_vl_hover =  '';
$form_default_bs_br_hover =  '';
$form_default_bs_sr_hover =  '';
$form_default_bs_color_hover =  '';

$form_default_bs_hl_focus =  '';
$form_default_bs_vl_focus = '';
$form_default_bs_br_focus = '';
$form_default_bs_sr_focus =  '';
$form_default_bs_color_focus = '';

// font size
$size = '%7B%22number%22%3A%2214%22%2C%22unit%22%3A%22%22%7D';

$range_padding_control = !empty($config['range_padding_control'])
    ? $config['range_padding_control']
    : [
        'top' => [
            'number' => 7,
        ],
        'bottom' => [
            'number' => 7,
        ],
        'right' => [
            'number' => 7,
        ],
        'left' => [
            'number' => 7,
        ],
    ];
$range_padding_control = $formatter->css_spacing($range_padding_control);
$range_margin_control = !empty($config['range_margin_control'])
    ? $config['range_margin_control']
    : '';
$range_margin_control = $formatter->css_spacing($range_margin_control);

$range_padding = !empty($config['range_padding'])
    ? $config['range_padding']
    : [
        'top' => [
            'number' => 1,
        ],
    ];
$range_padding = $formatter->css_spacing($range_padding);
$range_margin = !empty($config['range_margin'])
    ? $config['range_margin']
    : $form_default_margins;
$range_margin = $formatter->css_spacing($range_margin);

$range_use_icon_glyph = !empty($config['range_use_icon_glyph'])
    ? $config['range_use_icon_glyph']
    : 'on';
$range_glyph = $range_hover_glyph = $range_focus_glyph = '';

$range_icon_size = !empty($config['range_icon_size'])
    ? $formatter->css_scalar($config['range_icon_size'])
    : '';


// default ===========================================
// border
$range_border_style = !empty($config['range_border_style'])
    ? $config['range_border_style']
    : $form_default_border_style;
$range_border_model = !empty($config['range_border_model'])
    ? $config['range_border_model']
    : $form_default_border_model;
$border_model_alter = $formatter->from_spacing($range_border_model);
$range_border_model = $formatter->css_spacing($range_border_model);
$range_border_radius = !empty($config['range_border_radius'])
    ? $config['range_border_radius']
    : $form_default_border_radius;
$range_border_radius = $formatter->css_spacing($range_border_radius);
// color
$range_use_default_color = !empty($config['range_use_default_color'])
    ? $config['range_use_default_color']
    : 'on';
$range_border_color = !empty($config['range_border_color'])
    ? $config['range_border_color']
    : '';
$range_border_color = Wpw::inst()->storage()->get($range_border_color);
$range_control_color = !empty($config['range_control_color'])
    ? $config['range_control_color']
    : '';
$range_control_color = Wpw::inst()->storage()->get($range_control_color);
// bg
$range_bg = !empty($config['range_bg'])
    ? $config['range_bg']
    : '';
$range_bg = $formatter->from_bg($range_bg);
// shadow
$range_bs_hl = !empty($config['range_bs_hl'])
    ? $config['range_bs_hl']
    : $form_default_bs_hl;
$range_bs_hl = $formatter->css_scalar($range_bs_hl);
$range_bs_vl = !empty($config['range_bs_vl'])
    ? $config['range_bs_vl']
    : $form_default_bs_vl;
$range_bs_vl = $formatter->css_scalar($range_bs_vl);
$range_bs_br = !empty($config['range_bs_br'])
    ? $config['range_bs_br']
    : $form_default_bs_br;
$range_bs_br = $formatter->css_scalar($range_bs_br);
$range_bs_sr = !empty($config['range_bs_sr'])
    ? $config['range_bs_sr']
    : $form_default_bs_sr;
$range_bs_sr = $formatter->css_scalar($range_bs_sr);
$range_bs_color = !empty($config['range_bs_color'])
    ? $config['range_bs_color']
    : '';
$range_bs_color = Wpw::inst()->storage()->get($range_bs_color);
$range_bs = " box-shadow: {$range_bs_hl} {$range_bs_vl} {$range_bs_br} {$range_bs_sr} {$range_bs_color}; ";

// hover ===========================================
// border
$range_hover_border_style = !empty($config['range_hover_border_style'])
    ? $config['range_hover_border_style']
    : $form_default_border_style_hover;
$range_hover_border_model = !empty($config['range_hover_border_model'])
    ? $config['range_hover_border_model']
    : $form_default_border_model_hover;
$border_model_hover_alter = $formatter->from_spacing($range_hover_border_model);
$range_hover_border_model = $formatter->css_spacing($range_hover_border_model);
$range_hover_border_radius = !empty($config['range_hover_border_radius'])
    ? $config['range_hover_border_radius']
    : $form_default_border_radius_hover;
$range_hover_border_radius = $formatter->css_spacing($range_hover_border_radius);
// color
$range_hover_use_default_color = !empty($config['range_hover_use_default_color'])
    ? $config['range_hover_use_default_color']
    : 'on';
$range_hover_border_color = !empty($config['range_hover_border_color'])
    ? $config['range_hover_border_color']
    : '';
$range_hover_border_color = Wpw::inst()->storage()->get($range_hover_border_color);
$range_hover_control_color = !empty($config['range_hover_control_color'])
    ? $config['range_hover_control_color']
    : '';
$range_hover_control_color = Wpw::inst()->storage()->get($range_hover_control_color);
// bg
$range_hover_bg = !empty($config['range_hover_bg'])
    ? $config['range_hover_bg']
    : '';
$range_hover_bg = $formatter->from_bg($range_hover_bg);
// shadow
$range_hover_bs_hl = !empty($config['range_hover_bs_hl'])
    ? $config['range_hover_bs_hl']
    : $form_default_bs_hl_hover;
$range_hover_bs_hl = $formatter->css_scalar($range_hover_bs_hl);
$range_hover_bs_vl = !empty($config['range_hover_bs_vl'])
    ? $config['range_hover_bs_vl']
    : $form_default_bs_vl_hover;
$range_hover_bs_vl = $formatter->css_scalar($range_hover_bs_vl);
$range_hover_bs_br = !empty($config['range_hover_bs_br'])
    ? $config['range_hover_bs_br']
    : $form_default_bs_br_hover;
$range_hover_bs_br = $formatter->css_scalar($range_hover_bs_br);
$range_hover_bs_sr = !empty($config['range_hover_bs_sr'])
    ? $config['range_hover_bs_sr']
    : $form_default_bs_sr_hover;
$range_hover_bs_sr = $formatter->css_scalar($range_hover_bs_sr);
$range_hover_bs_color = !empty($config['range_hover_bs_color'])
    ? $config['range_hover_bs_color']
    : '';
$range_hover_bs_color = Wpw::inst()->storage()->get($range_hover_bs_color);
$range_hover_bs = " box-shadow: {$range_hover_bs_hl} {$range_hover_bs_vl} {$range_hover_bs_br} {$range_hover_bs_sr} {$range_hover_bs_color}; ";

// focus ===========================================
// border
$range_focus_border_style = !empty($config['range_focus_border_style'])
    ? $config['range_focus_border_style']
    : $form_default_border_style_focus;
$range_focus_border_model = !empty($config['range_focus_border_model'])
    ? $config['range_focus_border_model']
    : $form_default_border_model_focus;
$border_model_focus_alter = $formatter->from_spacing($range_focus_border_model);
$range_focus_border_model = $formatter->css_spacing($range_focus_border_model);
$range_focus_border_radius = !empty($config['range_focus_border_radius'])
    ? $config['range_focus_border_radius']
    : $form_default_border_radius_focus;
$range_focus_border_radius = $formatter->css_spacing($range_focus_border_radius);
// color
$range_focus_use_default_color = !empty($config['range_focus_use_default_color'])
    ? $config['range_focus_use_default_color']
    : 'on';
$range_focus_border_color = !empty($config['range_focus_border_color'])
    ? $config['range_focus_border_color']
    : '';
$range_focus_border_color = Wpw::inst()->storage()->get($range_focus_border_color);
$range_focus_control_color = !empty($config['range_focus_control_color'])
    ? $config['range_focus_control_color']
    : '';
$range_focus_control_color = Wpw::inst()->storage()->get($range_focus_control_color);
// bg
$range_focus_bg = !empty($config['range_focus_bg'])
    ? $config['range_focus_bg']
    : '';
$range_focus_bg = $formatter->from_bg($range_focus_bg);
// shadow
$range_focus_bs_hl = !empty($config['range_focus_bs_hl'])
    ? $config['range_focus_bs_hl']
    : $form_default_bs_hl_focus;
$range_focus_bs_hl = $formatter->css_scalar($range_focus_bs_hl);
$range_focus_bs_vl = !empty($config['range_focus_bs_vl'])
    ? $config['range_focus_bs_vl']
    : $form_default_bs_vl_focus;
$range_focus_bs_vl = $formatter->css_scalar($range_focus_bs_vl);
$range_focus_bs_br = !empty($config['range_focus_bs_br'])
    ? $config['range_focus_bs_br']
    : $form_default_bs_br_focus;
$range_focus_bs_br = $formatter->css_scalar($range_focus_bs_br);
$range_focus_bs_sr = !empty($config['range_focus_bs_sr'])
    ? $config['range_focus_bs_sr']
    : $form_default_bs_sr_focus;
$range_focus_bs_sr = $formatter->css_scalar($range_focus_bs_sr);
$range_focus_bs_color = !empty($config['range_focus_bs_color'])
    ? $config['range_focus_bs_color']
    : '';
$range_focus_bs_color = Wpw::inst()->storage()->get($range_focus_bs_color);
$range_focus_bs = " box-shadow: {$range_focus_bs_hl} {$range_focus_bs_vl} {$range_focus_bs_br} {$range_focus_bs_sr} {$range_focus_bs_color}; ";


$range_handle_bg = $range_control_color;
$range_hover_handle_bg = $range_hover_control_color;
$range_focus_handle_bg = $range_focus_control_color;

$range_glyph = !empty($config['range_glyph'])
    ? $formatter->get_media_url($config['range_glyph'])
    : '';

$range_hover_glyph = $formatter->prepare_svg_bg($range_glyph, $range_hover_control_color);
$range_focus_glyph = $formatter->prepare_svg_bg($range_glyph, $range_focus_control_color);
$range_glyph = $formatter->prepare_svg_bg($range_glyph, $range_control_color);

if (!empty($range_glyph)) {
    $range_handle_bg =
    $range_hover_handle_bg =
    $range_focus_handle_bg = 'transparent';
}


echo /** @lang CSS */
    '

'.$class_name.'.project-input.project-input_range {
    padding: ' . $range_padding . ';
    margin: ' . $range_margin . ';

}

'.$class_name.'.project-input.project-input_range > .background {
    border-style: ' . $range_border_style . ';
    border-width: ' . $range_border_model . ';
    border-color: ' . $range_border_color . ';
    border-radius: ' . $range_border_radius . ';
    ' . $range_bs . '
}

'.$class_name.'.project-input.project-input_range > .background > .color-layer {
    ' . $range_bg['fill'] . '
}

'.$class_name.'.project-input.project-input_range > .background > .image-layer {
    background-image: url("' . $range_bg['image'] . '");
}

'.$class_name.'.project-input.project-input_range .ui-slider-handle  {
    padding: ' . $range_padding_control . ';
    margin: ' . $range_margin_control . ';
}

'.$class_name.'.project-input.project-input_range .ui-slider-handle .project-input__icon i[class*="ib-"] {
    color:' . $range_control_color . ';
    fill: ' . $range_control_color . ';
    font-size: '.$range_icon_size.';
}

'.$class_name.'.project-input.project-input_range .ui-slider-handle .default-range {
    background-image: url("' . $range_glyph . '");
    height: '.$range_icon_size.';
    width: '.$range_icon_size.';
}


'.$class_name.'.project-input.project-input_range:hover  > .background {
    border-style: ' . $range_hover_border_style . ';
    border-width: ' . $range_hover_border_model . ';
    border-color: ' . $range_hover_border_color . ';
    border-radius: ' . $range_hover_border_radius . ';
    ' . $range_hover_bs . '
}


'.$class_name.'.project-input.project-input_range:hover > .background > .color-layer {
    ' . $range_hover_bg['fill'] . '
}

'.$class_name.'.project-input.project-input_range:hover > .background > .image-layer {
    background-image: url("' . $range_hover_bg['image'] . '");
}


'.$class_name.'.project-input.project-input_range .ui-slider-handle:hover .project-input__icon i[class*="ib-"] {
    color:' . $range_hover_control_color . ';
    fill: ' . $range_hover_control_color . ';
    font-size: '.$range_icon_size.';
}

'.$class_name.'.project-input.project-input_range .ui-slider-handle .hover-range {
    background-image: url("' . $range_hover_glyph . '");
    height: '.$range_icon_size.';
    width: '.$range_icon_size.';
}


'.$class_name.'.project-input.project-input_range .ui-slider-range-min {
    padding: ' . $range_padding . ';

    top: -' . $border_model_focus_alter['top']['number'] . $border_model_focus_alter['top']['units'] . ';
    left: -' . $border_model_focus_alter['left']['number'] . $border_model_focus_alter['left']['units'] . ';

}

'.$class_name.'.project-input.project-input_range .ui-slider-range-min > .background {
    border-style: ' . $range_focus_border_style . ';
    border-width: ' . $range_focus_border_model . ';
    border-color: ' . $range_focus_border_color . ';
    border-radius: ' . $range_focus_border_radius . ';
    ' . $range_focus_bs . '
}

'.$class_name.'.project-input.project-input_range .ui-slider-range-min .background > .color-layer {
    ' . $range_focus_bg['fill'] . '
}

'.$class_name.'.project-input.project-input_range .ui-slider-range-min .background > .image-layer {
    background-image: url("' . $range_focus_bg['image'] . '");
}

'.$class_name.'.project-input.project-input_range.project-input_focused .ui-slider-handle .project-input__icon i[class*="ib-"] {
    color:' . $range_focus_control_color . ';
    fill: ' . $range_focus_control_color . ';
    font-size: '.$range_icon_size.';
}

'.$class_name.'.project-input.project-input_range .ui-slider-handle .focused-range {
    background-image: url("' . $range_focus_glyph . '");
    height: '.$range_icon_size.';
    width: '.$range_icon_size.';
}


';