<?php

$formatter = Wpw::inst()->formatter();
$default_box_shadow = get_theme_mod('wpw_lightbox_shadow_size');
$default_color = get_theme_mod('wpw_shadow_color');
// main color
$main_color = get_theme_mod('wpw_accent_colors');
$main_color = (!empty($main_color) && is_string($main_color))
    ? json_decode(urldecode($main_color))
    : null;
$main_color = (isset($main_color[0]) && !empty($main_color[0]))
    ? $main_color[0]
    : '#ffab00';
$config = (isset($config) && !empty($config))
    ? $config
    : [];


// ------------------ default ------------------------//
$margins = (isset($config['portfolio-item_margin']) && !empty($config['portfolio-item_margin']))
    ? $config['portfolio-item_margin']
    : [
        'left' => [
            'number' => 20,
        ],
        'right' => [
            'number' => 20,
        ],
        'bottom' => [
            'number' => 40,
        ],
    ];
$margins = $formatter->css_spacing($margins);
// border default
$border_style_default = (isset($config['portfolio-item_border_style']) && !empty($config['portfolio-item_border_style']))
    ? $config['portfolio-item_border_style']
    : null;
$border_model_default = (isset($config['portfolio-item_border_model']) && !empty($config['portfolio-item_border_model']))
    ? $config['portfolio-item_border_model']
    : null;
$border_color_default = (isset($config['portfolio-item_border_color']) && !empty($config['portfolio-item_border_color']))
    ? $config['portfolio-item_border_color']
    : null;
$border_default = $formatter->css_border_simplify($border_style_default, $border_model_default, $border_color_default);
// border hover
$border_style_hover = (isset($config['portfolio-item_hover_border_style']) && !empty($config['portfolio-item_hover_border_style']))
    ? $config['portfolio-item_hover_border_style']
    : null;
$border_model_hover = (isset($config['portfolio-item_hover_border_model']) && !empty($config['portfolio-item_hover_border_model']))
    ? $config['portfolio-item_hover_border_model']
    : null;
$border_color_hover = (isset($config['portfolio-item_hover_border_color']) && !empty($config['portfolio-item_hover_border_color']))
    ? $config['portfolio-item_hover_border_color']
    : null;
$border_hover = $formatter->css_border_simplify($border_style_hover, $border_model_hover, $border_color_hover);
// box shadow default
$bs_h_length = (isset($config['portfolio-item_box_shadow_h_len']) && !empty($config['portfolio-item_box_shadow_h_len']))
    ? $config['portfolio-item_box_shadow_h_len']
    : $default_box_shadow;
$bs_h_length = $formatter->css_scalar($bs_h_length);
$bs_v_length = (isset($config['portfolio-item_box_shadow_v_len']) && !empty($config['portfolio-item_box_shadow_v_len']))
    ? $config['portfolio-item_box_shadow_v_len']
    : $default_box_shadow;
$bs_v_length = $formatter->css_scalar($bs_v_length);
$bs_blur_radius = (isset($config['portfolio-item_box_shadow_blur_radius']) && !empty($config['portfolio-item_box_shadow_blur_radius']))
    ? $config['portfolio-item_box_shadow_blur_radius']
    : $default_box_shadow;
$bs_blur_radius = $formatter->css_scalar($bs_blur_radius);
$bs_spread_radius = (isset($config['portfolio-item_box_shadow_spread_radius']) && !empty($config['portfolio-item_box_shadow_spread_radius']))
    ? $config['portfolio-item_box_shadow_spread_radius']
    : $default_box_shadow;
$bs_spread_radius = $formatter->css_scalar($bs_spread_radius);
$bs_color = (isset($config['portfolio-item_box_shadow_color']) && !empty($config['portfolio-item_box_shadow_color']))
    ? $config['portfolio-item_box_shadow_color']
    : null;
$bs_type = (isset($config['portfolio-item_box_shadow_style']) && !empty($config['portfolio-item_box_shadow_style']))
    ? $config['portfolio-item_box_shadow_style']
    : null;
$box_shadow_default = "{$bs_type} {$bs_h_length} {$bs_v_length} {$bs_blur_radius} {$bs_spread_radius} {$bs_color}";
// box shadow hover
$bs_hover_h_length = (isset($config['portfolio-item_hover_box_shadow_h_len']) && !empty($config['portfolio-item_hover_box_shadow_h_len']))
    ? $config['portfolio-item_hover_box_shadow_h_len']
    : $default_box_shadow;
$bs_hover_h_length = $formatter->css_scalar($bs_hover_h_length);
$bs_hover_v_length = (isset($config['portfolio-item_hover_box_shadow_v_len']) && !empty($config['portfolio-item_hover_box_shadow_v_len']))
    ? $config['portfolio-item_hover_box_shadow_v_len']
    : $default_box_shadow;
$bs_hover_v_length = $formatter->css_scalar($bs_hover_v_length);
$bs_hover_blur_radius = (isset($config['portfolio-item_hover_box_shadow_blur_radius']) && !empty($config['portfolio-item_hover_box_shadow_blur_radius']))
    ? $config['portfolio-item_hover_box_shadow_blur_radius']
    : $default_box_shadow;
$bs_hover_blur_radius = $formatter->css_scalar($bs_hover_blur_radius);
$bs_hover_spread_radius = (isset($config['portfolio-item_hover_box_shadow_spread_radius']) && !empty($config['portfolio-item_hover_box_shadow_spread_radius']))
    ? $config['portfolio-item_hover_box_shadow_spread_radius']
    : $default_box_shadow;
$bs_hover_spread_radius = $formatter->css_scalar($bs_hover_spread_radius);
$bs_hover_color = (isset($config['portfolio-item_hover_box_shadow_color']) && !empty($config['portfolio-item_hover_box_shadow_color']))
    ? $config['portfolio-item_hover_box_shadow_color']
    : null;
$bs_hover_type = (isset($config['portfolio-item_hover_box_shadow_style']) && !empty($config['portfolio-item_hover_box_shadow_style']))
    ? $config['portfolio-item_hover_box_shadow_style']
    : null;
$box_shadow_hover = "{$bs_hover_type} {$bs_hover_h_length} {$bs_hover_v_length} {$bs_hover_blur_radius} {$bs_hover_spread_radius} {$bs_hover_color}";
// image
$show_image = isset($config['portfolio-item_show_image'])
    ? $config['portfolio-item_show_image']
    : true;
$show_image = $show_image
    ? 'block'
    : 'none';
// image ratio
$image_ratio = (isset($config['portfolio-item_thumbnail_ratio']) && !empty($config['portfolio-item_thumbnail_ratio']))
    ? floatval($config['portfolio-item_thumbnail_ratio'])
    : 0.6666666666666666;
$image_ratio = 100 * $image_ratio;
// overlay
$overlay_color = (isset($config['portfolio-item_overlay_color']) && !empty($config['portfolio-item_overlay_color']))
    ? $config['portfolio-item_overlay_color']
    : null;
$overlay_color_hover = (isset($config['portfolio-item_hover_overlay_color']) && !empty($config['portfolio-item_hover_overlay_color']))
    ? $config['portfolio-item_hover_overlay_color']
    : null;
// addition information
$show_meta = (isset($config['portfolio-item_additional_info']) && in_array($config['portfolio-item_additional_info'], [
        'show',
        'hide',
        'hover',
    ]))
    ? $config['portfolio-item_additional_info']
    : 'hover';
switch ($show_meta) {
    case 'show': {
        $show_meta = 'opacity: 1';
    }
        break;
    case 'hide': {
        $show_meta = 'display: none';
    }
        break;
    default: {
        $show_meta = '';
    }
        break;
}
// align
$align = (isset($config['portfolio-item_align']) && !empty($config['portfolio-item_align']))
    ? $config['portfolio-item_align']
    : 'center';
switch ($align) {
    case 'left': {
        $align = 'flex-start';
    }
        break;
    case 'right': {
        $align = 'flex-end';
    }
        break;
    default: {
        $align = 'center';
    }
        break;
}
// paddings
$paddings = (isset($config['portfolio-item_padding']) && !empty($config['portfolio-item_padding']))
    ? $config['portfolio-item_padding']
    : [
        'top' => [
            'number' => 40,
        ],
        'bottom' => [
            'number' => 40,
        ],
        'right' => [
            'number' => 40,
        ],
        'left' => [
            'number' => 40,
        ],
    ];
$paddings = $formatter->css_spacing($paddings);
// colors
$title_color = (isset($config['portfolio-item_title_color']) && !empty($config['portfolio-item_title_color']))
    ? $config['portfolio-item_title_color']
    : $main_color;
$meta_color = (isset($config['portfolio-item_category_color']) && !empty($config['portfolio-item_category_color']))
    ? $config['portfolio-item_category_color']
    : '#fff';
$title_color_hover = (isset($config['portfolio-item_hover_title_color']) && !empty($config['portfolio-item_hover_title_color']))
    ? $config['portfolio-item_hover_title_color']
    : $main_color;
$meta_color_hover = (isset($config['portfolio-item_hover_category_color']) && !empty($config['portfolio-item_hover_category_color']))
    ? $config['portfolio-item_hover_category_color']
    : '#fff';
// font size
$title_font_size = (isset($config['portfolio-item_title_font_size']) && !empty($config['portfolio-item_title_font_size']))
    ? $config['portfolio-item_title_font_size']
    : [
        'number' => 20,
    ];
$title_font_size = $formatter->css_scalar($title_font_size);
$meta_font_size = (isset($config['portfolio-item_meta_font_size']) && !empty($config['portfolio-item_meta_font_size']))
    ? $config['portfolio-item_meta_font_size']
    : [
        'number' => 10,
    ];
$meta_font_size = $formatter->css_scalar($meta_font_size);

// styles
echo /** @lang CSS */
    '
.all-projects__item {
    padding: ' . $margins . ';
}

.all-projects__item:hover .all-projects__item-header {
    box-shadow: ' . $box_shadow_hover . ';
    ' . $border_hover . '
}

.all-projects__item .all-projects__item-header {
    box-shadow: ' . $box_shadow_default . ';
    ' . $border_default . '
}

.all-projects__item-image img {
    display: ' . $show_image . ';
}

.all-projects__item-image {
    padding-bottom: ' . $image_ratio . '%;
}

.all-projects__item-image:before {
    background-color: ' . $overlay_color . ';
}

.all-projects__item:hover .all-projects__item-image:before {
    background-color: ' . $overlay_color_hover . ';
}

.all-projects__item .all-projects__item-links {
    align-items: ' . $align . ';
}

.all-projects__item-links-wrapper {
    padding: ' . $paddings . ';
}

.all-projects__item-links h2 {
    color: ' . $title_color . ';
    font-size: ' . $title_font_size . ';
}

.all-projects__item:hover .all-projects__item-links h2 {
    color: ' . $title_color_hover . ';
}

.all-projects__item-links .all-projects__item-category {
    color: ' . $meta_color . ';
    font-size: ' . $meta_font_size . ';
}

.all-projects__item:hover .all-projects__item-links .all-projects__item-category {
    color: ' . $meta_color_hover . ';
}
';