<?php


namespace FluentCrm\App\Services\BlockRender;


use FluentCrm\Framework\Support\Arr;

class BlockEditorHelper
{
    public static function getStyleDefauls()
    {
        return [
            'spacing'     => [
                [
                    'name' => '2X-Small',
                    'slug' => 'fc-xx-small',
                    'size' => '5px',
                ],
                [
                    'name' => 'X-Small',
                    'slug' => 'fc-x-small',
                    'size' => '10px',
                ],
                [
                    'name' => 'Small',
                    'slug' => 'fc-small',
                    'size' => '14px',
                ],
                [
                    'name' => 'Medium',
                    'slug' => 'fc-medium',
                    'size' => '20px',
                ],
                [
                    'name' => 'Large',
                    'slug' => 'fc-large',
                    'size' => '30px',
                ],
                [
                    'name' => 'X-Large',
                    'slug' => 'fc-x-large',
                    'size' => '45px',
                ],
                [
                    'name' => '2X-Large',
                    'slug' => 'fc-xx-large',
                    'size' => '60px',
                ],
            ],
            'font-family' => [
                [
                    'name'       => 'System UI',
                    'slug'       => 'system-ui',
                    'fontFamily' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
                ],
                [
                    'name'       => 'Arial',
                    'slug'       => 'arial',
                    'fontFamily' => "Arial, 'Helvetica Neue', Helvetica, sans-serif",
                ],
                [
                    'name'       => 'Comic Sans',
                    'slug'       => 'comic-sans',
                    'fontFamily' => "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif",
                ],
                [
                    'name'       => 'Courier New',
                    'slug'       => 'courier-new',
                    'fontFamily' => "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
                ],
                [
                    'name'       => 'Georgia',
                    'slug'       => 'georgia',
                    'fontFamily' => "Georgia, Times, 'Times New Roman', serif",
                ],
                [
                    'name'       => 'Helvetica',
                    'slug'       => 'helvetica',
                    'fontFamily' => "Helvetica, Arial, Verdana, sans-serif",
                ],
                [
                    'name'       => 'Lucida',
                    'slug'       => 'lucida',
                    'fontFamily' => "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
                ],
                [
                    'name'       => 'Tahoma',
                    'slug'       => 'tahoma',
                    'fontFamily' => "Tahoma, Verdana, Segoe, sans-serif",
                ],
                [
                    'name'       => 'Times New Roman',
                    'slug'       => 'times-new-roman',
                    'fontFamily' => "'Times New Roman', Times, Baskerville, Georgia, serif",
                ],
                [
                    'name'       => 'Trebuchet MS',
                    'slug'       => 'trebuchet-ms',
                    'fontFamily' => "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif",
                ],
                [
                    'name'       => 'Verdana',
                    'slug'       => 'verdana',
                    'fontFamily' => "Verdana, Geneva, sans-serif",
                ],
                [
                    'name'       => 'Lato',
                    'slug'       => 'lato',
                    'fontFamily' => "'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                ],
                [
                    'name'       => 'Lora',
                    'slug'       => 'lora',
                    'fontFamily' => "'Lora', Georgia, 'Times New Roman', serif",
                ],
                [
                    'name'       => 'Merriweather',
                    'slug'       => 'merriweather',
                    'fontFamily' => "'Merriweather', Georgia, 'Times New Roman', serif",
                ],
                [
                    'name'       => 'Merriweather Sans',
                    'slug'       => 'merriweather-sans',
                    'fontFamily' => "'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                ],
                [
                    'name'       => 'Noticia Text',
                    'slug'       => 'noticia-text',
                    'fontFamily' => "'Noticia Text', Georgia, 'Times New Roman', serif",
                ],
                [
                    'name'       => 'Open Sans',
                    'slug'       => 'open-sans',
                    'fontFamily' => "'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                ],
                [
                    'name'       => 'Roboto',
                    'slug'       => 'roboto',
                    'fontFamily' => "'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                ],
                [
                    'name'       => 'Source Sans Pro',
                    'slug'       => 'source-sans-pro',
                    'fontFamily' => "'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif",
                ],
            ],
            'font-size'   => [
                [
                    'name' => 'Small',
                    'slug' => 'fc-small',
                    'size' => '13px',
                ],
                [
                    'name' => 'Regular',
                    'slug' => 'fc-regular',
                    'size' => '16px',
                ],
                [
                    'name' => 'Medium',
                    'slug' => 'fc-medium',
                    'size' => '18px',
                ],
                [
                    'name' => 'Large',
                    'slug' => 'fc-large',
                    'size' => '26px',
                ],
                [
                    'name' => 'Extra Large',
                    'slug' => 'fc-x-large',
                    'size' => '32px',
                ],
            ],
            'color'       => [
                [
                    'name'  => 'Black',
                    'slug'  => 'black',
                    'color' => '#000000'
                ],
                [
                    'name'  => 'Cyan bluish gray',
                    'slug'  => 'cyan-bluish-gray',
                    'color' => '#abb8c3'
                ],
                [
                    'name'  => 'White',
                    'slug'  => 'white',
                    'color' => '#ffffff'
                ],
                [
                    'name'  => 'Pale pink',
                    'slug'  => 'pale-pink',
                    'color' => '#f78da7'
                ],
                [
                    'name'  => 'Vivid red',
                    'slug'  => 'vivid-red',
                    'color' => '#cf2e2e'
                ],
                [
                    'name'  => 'Luminous vivid orange',
                    'slug'  => 'luminous-vivid-orange',
                    'color' => '#ff6900'
                ],
                [
                    'name'  => 'Luminous vivid amber',
                    'slug'  => 'luminous-vivid-amber',
                    'color' => '#fcb900'
                ],
                [
                    'name'  => 'Light green cyan',
                    'slug'  => 'light-green-cyan',
                    'color' => '#7bdcb5'
                ],
                [
                    'name'  => 'Vivid green cyan',
                    'slug'  => 'vivid-green-cyan',
                    'color' => '#00d084'
                ],
                [
                    'name'  => 'Pale cyan blue',
                    'slug'  => 'pale-cyan-blue',
                    'color' => '#8ed1fc'
                ],
                [
                    'name'  => 'Vivid cyan blue',
                    'slug'  => 'vivid-cyan-blue',
                    'color' => '#0693e3'
                ],
                [
                    'name'  => 'Vivid purple',
                    'slug'  => 'vivid-purple',
                    'color' => '#9b51e0'
                ]
            ]
        ];
    }

    public static function getDefaultPreset($key = '')
    {
        $defaults = self::getStyleDefauls();

        if ($key && isset($defaults[$key])) {
            return $defaults[$key];
        }

        return [];
    }

    public static function getStyleDefaultPresets()
    {
        $defaults = self::getStyleDefauls();

        $cssProps = '';

        foreach ($defaults['spacing'] as $item) {
            $cssProps .= '--wp--preset--spacing--' . $item['slug'] . ': ' . $item['size'] . ';';
        }

        // Keep core color preset variables available inside the editor canvas.
        // Without these, Gutenberg's link color styles can resolve to empty values.
        foreach ($defaults['color'] as $item) {
            $cssProps .= '--wp--preset--color--' . $item['slug'] . ': ' . $item['color'] . ';';
        }

        return $cssProps;
    }

    public static function replaceStyleSlugsWithValues($css = '')
    {
        if (!$css) {
            return '';
        }

        $defaults = self::getStyleDefauls();

        $replaces = [
            'var(--wp--preset--color--white)' => 'white',
        ];

        foreach ($defaults as $key => $value) {
            if (is_array($value)) {
                foreach ($value as $item) {
                    if ($key === 'spacing') {
                        $replaces['var(--wp--preset--spacing--' . $item['slug'] . ')'] = $item['size'];
                    } else if ($key === 'font-size') {
                        $replaces['var(--fcom--font--size--' . $item['slug'] . ')'] = $item['size'];
                        $replaces['var(--wp--preset--font-size--' . $item['slug'] . ')'] = $item['size'];
                    } else if ($key === 'color') {
                        $replaces['var(--fcom--color--' . $item['slug'] . ')'] = $item['color'];
                        $replaces['var(--wp--preset--color--' . $item['slug'] . ')'] = $item['color'];
                    } else if ($key === 'font-family') {
                        $replaces['var(--wp--preset--font-family--' . $item['slug'] . ')'] = $item['fontFamily'];
                    }
                }
            }
        }

        // Include active theme font size presets too (small, medium, large, etc).
        $themeFontSizes = \FluentCrm\App\Services\Helper::getThemeFontSizes();
        foreach ((array)$themeFontSizes as $themeFontSize) {
            if (!is_array($themeFontSize) || empty($themeFontSize['slug']) || !isset($themeFontSize['size'])) {
                continue;
            }

            $size = $themeFontSize['size'];
            if (is_numeric($size)) {
                $size = $size . 'px';
            }

            $replaces['var(--wp--preset--font-size--' . $themeFontSize['slug'] . ')'] = $size;
        }

        return str_replace(array_keys($replaces), array_values($replaces), $css);
    }

    public static function renderAtts($atts = [], $echo = false)
    {
        $rendered = '';
        foreach ($atts as $key => $value) {
            if (is_array($value)) {
                $value = implode(' ', $value);
            }
            $value = esc_attr($value);
            $key = esc_attr($key);
            $rendered .= $key . '="' . $value . '" ';
        }

        if ($echo) {
            echo $rendered;
        }

        return $rendered;
    }

    public static function renderStyles($styles = [], $echo = false)
    {
        $rendered = '';
        foreach ($styles as $key => $value) {
            if (!$value) {
                continue;
            }
            $rendered .= $key . ':' . $value . ';';
        }

        if ($echo) {
            echo esc_attr($rendered);
        }

        return esc_attr($rendered);
    }

    public static function getBorderColor($attrs = [], $default = '')
    {
        if ($borderColor = Arr::get($attrs, 'borderColor', '')) {
            $color = 'var(--fcom--color--' . $borderColor . ')';
            return self::replaceStyleSlugsWithValues($color);
        }

        $color = $default;
        if ($borderConfig = Arr::get($attrs, 'style.border', [])) {
            $color = Arr::get($borderConfig, 'color', '');
        }

        return $color;
    }

    public static function getDynamicCssForEditor()
    {
        $fonts = self::getDefaultPreset('font-family');

        $css = '';

        foreach ($fonts as $font) {
            $css .= '.editor-styles-wrapper .has-' . $font['slug'] . '-font-family { font-family: ' . $font['fontFamily'] . ' !important; }';
        }

        return $css;

    }

    public static function getDefaultPrefConfig()
    {
        return [
            'content_width'          => 700,
            'content_border_radius'  => '0px',
            'content_padding_top'    => '20px', // matched
            'content_padding_right'  => '20px', // matched
            'content_padding_bottom' => '20px', // matched
            'content_padding_left'   => '20px', // matched
            'content_margin_top'     => '20px', // new
            'content_margin_bottom'  => '20px', // new

            'headings_font_family' => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", // matched
            'content_font_family'  => "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", // matched

            'body_bg_color'    => '#FAFAFA', // matched
            'content_bg_color' => '#FFFFFF', // matched

            'headings_color'   => '#202020', // matched
            'text_color'       => '#202020', // matched
            'link_color'       => '#0693e3',
            'link_color_hover' => '', // not used now

            'paragraph_font_size'   => '16px', // matched
            'paragraph_line_height' => '1.5', // matched

            'footer_text_color' => '#202020', // matched,

            'design_template' => 'simple'
        ];
    }
}
