<?php
/**
 * Various html elements
 *
 * Standard: PSR-2
 * @link http://www.php-fig.org/psr/psr-2 Full Documentation
 *
 * @package SC\DUPX\U
 *
 */
defined('ABSPATH') || defined('DUPXABSPATH') || exit;

/**
 * 
 */
class DUPX_U_Html
{

    protected static $uniqueId = 0;

    /**
     * inizialize css for html elements
     */
    public static function css()
    {
        self::lightBoxCss();
        self::moreContentCss();
        self::inputPasswordToggleCss();
        self::checkboxSwitchCss();
    }

    /**
     * inizialize js for html elements
     */
    public static function js()
    {
        self::lightBoxJs();
        self::moreContentJs();
        self::inputPasswordToggleJs();
    }

    private static function getUniqueId()
    {
        self::$uniqueId ++;
        return 'dup-html-id-'.self::$uniqueId.'-'.str_replace('.', '-', microtime(true));
    }

    /**
     * this function returns a string with all the html attributes with this format key = "value" key2 = "value2"
     * an esc_attr is executed automatically
     * 
     * @param array $attrs
     * @return string
     */
    public static function arrayAttrToHtml($attrs)
    {
        $sttrsStr = array();
        foreach ($attrs as $key => $val) {
            $sttrsStr[] = $key.'="'.DUPX_U::esc_attr($val).'"';
        }
        return implode(' ', $sttrsStr);
    }

    public static function getHeaderMain($htmlTitle)
    {
        ?>
        <div id="header-main-wrapper" >
            <div class="dupx-modes">
                <?php echo DUPX_InstallerState::getInstance()->getHtmlModeHeader(); ?>
            </div>
            <div class="dupx-logfile-link">
                <?php DUPX_View_Funcs::installerLogLink(); ?>
            </div>
            <div class="hdr-main">
                <?php echo $htmlTitle; ?>
            </div>
        </div>
        <?php
    }

    public static function getLigthBox($linkLabelHtml, $titleContent, $htmlContent, $echo = true, $htmlAfterContent = '')
    {
        ob_start();
        $id = self::getUniqueId();
        ?>
        <a class="dup-ligthbox-link" data-dup-ligthbox="<?php echo $id; ?>" ><?php echo $linkLabelHtml; ?></a>
        <div id="<?php echo $id; ?>" class="dub-ligthbox-content close">
            <div class="wrapper" >
                <h2 class="title" ><?php echo htmlspecialchars($titleContent); ?></h2>
                <div class="content" ><?php echo $htmlContent; ?></div><?php echo $htmlAfterContent; ?>
                <button class="close-button" title="Close" ><i class="fa fa-2x fa-times"></i></button>
            </div>
        </div>
        <?php
        if ($echo) {
            ob_end_flush();
        } else {
            return ob_get_clean();
        }
    }

    public static function getLightBoxIframe($linkLabelHtml, $titleContent, $url, $autoUpdate = false, $enableTargetDownload = false, $echo = true)
    {
        $classes      = array('dup-lightbox-iframe');
        $afterContent = '<div class="tool-box">';
        if ($autoUpdate) {
            //$classes[]    = 'auto-update';
            $afterContent .= '<button class="button toggle-auto-update disabled" title="Enable auto reload" ><i class="fa fa-2x fa-redo-alt"></i></button>';
        }
        if ($enableTargetDownload) {
            $path = parse_url($url, PHP_URL_PATH);
            if (!empty($path)) {
                $urlPath  = parse_url($url, PHP_URL_PATH);
                $fileName = basename($urlPath);
            } else {
                $fileName = parse_url($url, PHP_URL_HOST);
            }
            $afterContent .= '<a target="_blank" class="button download-button" title="Download" download="'.DUPX_U::esc_attr($fileName).'" href="'.DUPX_U::esc_attr($url).'" onclick="function () { event.preventDefault(); return false;}" ><i class="fa fa-2x fa-download"></i></a>';
        }
        $afterContent .= '</div>';

        $lightBoxContent = '<iframe class="'.implode(' ', $classes).'" data-iframe-url="'.DUPX_U::esc_attr($url).'"></iframe> ';
        return DUPX_U_Html::getLigthBox($linkLabelHtml, $titleContent, $lightBoxContent, $echo, $afterContent);
    }

    protected static function lightBoxCss()
    {
        ?>
        <style>
            .dup-ligthbox-link {
                text-decoration: underline;
                cursor: pointer;
            }
            .dub-ligthbox-content {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-color: #FFFFFF;
                background-color: rgba(255,255,255,0.95);
                z-index: 999999;
                overflow: hidden;
            }
            .dub-ligthbox-content.close {
                width: 0;
                height: 0;
            }
            .dub-ligthbox-content.open {
                width: 100vw;
                height: 100vh;
            }

            .dub-ligthbox-content > .wrapper {
                width: 100vw;
                height: 100vh;
            }

            .dub-ligthbox-content > .wrapper > .title {
                height: 40px;
                line-height: 40px;
                margin: 0;
                padding: 0 15px;
            }

            .dub-ligthbox-content > .wrapper > .content {
                margin: 0 15px 15px;
                border: 1px solid darkgray;
                padding: 15px;
                height: calc(100% - 15px - 40px);
                box-sizing: border-box;
            }

            .dub-ligthbox-content > .wrapper > .tool-box {
                position: absolute;
                top: 0px;
                left: 200px;
            }

            .dub-ligthbox-content .tool-box .button {
                display: inline-block;
                background: transparent;
                border: 0 none;
                padding: 5px;
                margin: 0 10px;
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
                color: #000;
                cursor: pointer;
            }

            .dub-ligthbox-content .tool-box .button.disabled {
                color: #BABABA;
            }

            .dub-ligthbox-content > .wrapper > .close-button {
                position: absolute;
                top: 0px;
                right: 23px;
                background: transparent;
                border: 0 none;
                padding: 5px;
                margin: 0;
                height: 40px;
                line-height: 40px;
                box-sizing: border-box;
                color: #000;
                cursor: pointer;
            }

            .dub-ligthbox-content .row-cols-2 {
                height: 100%;
            }

            .dub-ligthbox-content .row-cols-2 .col {
                width: 50%;
                box-sizing: border-box;
                float: left;
                border-right: 1px solid black;
                height: 100%;
                overflow: auto;
            }

            .dub-ligthbox-content .row-cols-2 .col-2 {
                padding-left: 15px;
            }

            .dub-ligthbox-content .dup-lightbox-iframe {
                border: 0 none;
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }

        </style>
        <?php
    }

    protected static function lightBoxJs()
    {
        ?>
        <script>
            $(document).ready(function ()
            {
                var currentLightboxOpen = null;

                var toggleLightbox = function (target) {
                    if (target.hasClass('close')) {
                        target.animate({
                            height: "100vh",
                            width: "100vw"
                        }, 500, 'linear', function () {
                            $(this).removeClass('close').addClass('open').trigger('dup-lightbox-open');
                            currentLightboxOpen = target;
                        });
                    } else {
                        target.animate({
                            height: "0",
                            width: "0"
                        }, 500, 'linear', function () {
                            $(this).removeClass('open').addClass('close').trigger('dup-lightbox-close');
                            currentLightboxOpen = null;
                        });
                    }
                };

                function dupIframeLoaded(iframe, content) {
                    if (iframe.hasClass('auto-update')) {
                        setTimeout(function () {
                            dupIframeReload(iframe, content);
                        }, 3000);
                    }
                }
                ;

                function dupIframeReload(iframe, content) {
                    if (content.hasClass('open')) {
                        iframe[0].contentDocument.location.reload(true);
                        iframe.ready(function () {
                            dupIframeLoaded(iframe, content);
                        });
                    }
                }
                ;

                $('.dup-lightbox-iframe').on("load", function () {
                    this.contentWindow.scrollBy(0, 100000);
                });

                $('.dub-ligthbox-content').each(function () {
                    var content = $(this).detach().appendTo('body');
                    var iframe = content.find('.dup-lightbox-iframe');
                    if (iframe.length) {
                        content.
                                bind('dup-lightbox-open', function () {
                                    iframe.attr('src', iframe.data('iframe-url')).ready(function () {
                                        dupIframeLoaded(iframe, content);
                                    });
                                }).
                                bind('dup-lightbox-close', function () {
                                    iframe.attr('src', '');
                                });
                    }
                });

                $('[data-dup-ligthbox]').click(function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    var target = $('#' + $(this).data('dup-ligthbox'));
                    toggleLightbox(target);
                    return false;
                });

                $('.dub-ligthbox-content .toggle-auto-update').click(function (event) {
                    event.stopPropagation();
                    var elem = $(this);
                    var content = elem.closest('.dub-ligthbox-content');
                    var iframe = content.find('.dup-lightbox-iframe');
                    if (iframe.hasClass('auto-update')) {
                        iframe.removeClass('auto-update');
                        elem.addClass('disabled').attr('title', 'Enable auto reload');
                    } else {
                        iframe.addClass('auto-update');
                        elem.removeClass('disabled').attr('title', 'Disable auto reload');
                        dupIframeReload(iframe, content);
                    }
                });

                $('.dub-ligthbox-content .close-button').click(function (event) {
                    event.stopPropagation();
                    toggleLightbox($(this).closest('.dub-ligthbox-content'));
                });

                $(window).keydown(function (event) {
                    if (event.key === 'Escape' && currentLightboxOpen !== null) {
                        currentLightboxOpen.find('.close-button').trigger('click');
                    }
                });
            });
        </script>
        <?php
    }

    /**
     *
     * @param string $htmlContent
     * @param string|string[] $classes additiona classes on main div
     * @param int $step pixel foreach more step
     * @param string $id id on main div
     * @param bool $echo
     * 
     * @return string|void
     */
    public static function getMoreContent($htmlContent, $classes = array(), $step = 200, $id = '', $echo = true)
    {
        $inputCls    = filter_var($classes, FILTER_SANITIZE_STRING, FILTER_FORCE_ARRAY);
        $mainClasses = array_merge(array('more-content'), $inputCls);
        $atStep      = max(100, $step);
        $idAttr      = empty($id) ? '' : 'id="'.$id.'" ';
        ob_start();
        ?>
        <div <?php echo $idAttr; ?>class="<?php echo implode(' ', $mainClasses); ?>" data-more-step="<?php echo $atStep; ?>" style="max-height: <?php echo $atStep; ?>px">
            <div class="more-wrapper" ><?php echo $htmlContent; ?></div>
            <button class="more-button" type="button">[ show more ]</button>
            <button class="all-button" type="button" >[ show all ]</button>
        </div>
        <?php
        if ($echo) {
            ob_end_flush();
        } else {
            return ob_get_clean();
        }
    }

    protected static function moreContentCss()
    {
        ?>
        <style>
            .more-content {
                overflow: hidden;
                position: relative;
                max-height: 0;
            }

            .more-content.more::after {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                height: 60px;
                width: 100%;
                background-image: linear-gradient(transparent, rgba(255,255,255,0.95) 70%);
            }

            .more-content .more-button,
            .more-content .all-button {
                position: absolute;
                bottom: 0;
                z-index: 1000;
                display: none;
                background: rgba(255,255,255,0.5);
                border: 0 none;
                padding: 10px 10px 0;
                margin: 0;
                color: #365899;
                cursor: pointer;
            }

            .more-content .more-button:hover,
            .more-content .all-button:hover {
                text-decoration: underline;
            }

            .more-content .more-button {
                left: 0;
            }

            .more-content .all-button {
                right: 0;
            }

            .more-content.more .more-button,
            .more-content.more .all-button {
                display: block;
            }

        </style>
        <?php
    }

    protected static function moreContentJs()
    {
        ?>
        <script>
            $(document).ready(function ()
            {
                function moreCheck(moreCont, moreWrap) {
                    if (moreWrap.height() > moreCont.height()) {
                        moreCont.addClass('more');
                    } else {
                        moreCont.removeClass('more');
                    }
                }

                $('.more-content').each(function () {
                    var moreCont = $(this);
                    var step = moreCont.data('more-step');
                    var moreWrap = $(this).find('.more-wrapper');

                    moreCont.find('.more-button').click(function () {
                        moreCont.css('max-height', "+=" + step + "px");
                        moreCheck(moreCont, moreWrap);
                    });

                    moreCont.find('.all-button').click(function () {
                        moreCont.css('max-height', "none");
                        moreCheck(moreCont, moreWrap);
                    });

                    moreCheck(moreCont, moreWrap);
                });
            });
        </script>
        <?php
    }

    public static function inputPasswordToggle($name, $id = '', $classes = array(), $attrs = array())
    {
        if (!is_array($attrs)) {
            $attrs = array();
        }
        if (!is_array($classes)) {
            if (empty($classes)) {
                $classes = array();
            } else {
                $classes = array($classes);
            }
        }
        $idAttr    = empty($id) ? '_id_'.$name : $id;
        $classes[] = 'input-password-group input-postfix-btn-group';

        $attrs['type'] = 'password';
        $attrs['name'] = $name;
        $attrs['id']   = $idAttr;
        $attrsHtml     = array();

        foreach ($attrs as $atName => $atValue) {
            $attrsHtml[] = $atName.'="'.DUPX_U::esc_attr($atValue).'"';
        }
        ?>
        <span class="<?php echo implode(' ', $classes); ?>" >
            <input <?php echo implode(' ', $attrsHtml); ?> />
            <button type="button" class="postfix" title="Show the password"><i class="fas fa-eye fa-xs"></i></button>
        </span>
        <?php
    }

    protected static function inputPasswordToggleCss()
    {
        ?>
        <style>
            .input-password-group {
                position: relative;
            }

            .input-password-group button i {
                line-height: 30px;
                margin: 0;
                padding: 0;
            }

            .input-password-group .parsley-errors-list {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 10px;
            }

        </style>
        <?php
    }

    protected static function inputPasswordToggleJs()
    {
        ?>
        <script>
            $(document).ready(function () {
                $('.input-password-group').each(function () {
                    var group = $(this);
                    var pwdInput = group.find('input');
                    var pwdLock = group.find('button');

                    pwdLock.click(function () {
                        if (pwdInput.attr('type') === 'password') {
                            pwdInput.attr({
                                'type': 'text',
                                'title': 'Hide the password'
                            });
                            pwdLock.find('i')
                                    .removeClass('fa-eye')
                                    .addClass('fa-eye-slash');
                        } else {
                            pwdInput.attr({
                                'type': 'password',
                                'title': 'Show the password'
                            });
                            pwdLock.find('i').removeClass('fa-eye-slash').addClass('fa-eye');
                        }
                    });
                });

            });
        </script>
        <?php
    }

    public static function checkboxSwitch($inputAttrs = array(), $switchAttrs = array())
    {
        $inputAttrs['type'] = 'checkbox';
        if (!isset($switchAttrs['class'])) {
            $switchAttrs['class'] = array();
        }
        $switchAttrs['class'] = implode(' ', array_merge(array('checkbox-switch'), (array) $switchAttrs['class']));
        ?>
        <span  <?php echo self::arrayAttrToHtml($switchAttrs); ?> >
            <input <?php echo self::arrayAttrToHtml($inputAttrs); ?> >
            <span class="slider"></span>
        </span>
        <?php
    }

    protected static function checkboxSwitchCss()
    {
        ?>
        <style>
            .checkbox-switch {
                position: relative;
                display: inline-block;
                width: 48px;
                height: 26px;
                box-sizing: border-box;
                bottom: 0;
                border-radius: 4px;
            }

            .checkbox-switch input {
                position: absolute;
                opacity: 0;
                width: 100%;
                height: 100%;
                z-index: 9999;
                top: 0;
                left: 0;
            }

            .checkbox-switch .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ccc;
                -webkit-transition: .4s;
                transition: .4s;
                border-radius: 4px;
                overflow: hidden;
            }

            .checkbox-switch .slider:before {
                position: absolute;
                content: "";
                height: 20px;
                width: 20px;
                left: 3px;
                bottom: 3px;
                background-color: white;
                -webkit-transition: .4s;
                transition: .4s;
                border-radius: 4px;
                overflow: hidden;
            }

            .checkbox-switch input:checked + .slider {
                background-color: #2196F3;
            }

            .checkbox-switch input:focus + .slider {
                box-shadow: 0 0 1px #2196F3;
            }

            .checkbox-switch input:checked + .slider:before {
                -webkit-transform: translateX(20px);
                -ms-transform: translateX(20px);
                transform: translateX(20px);
            }

            /* Rounded sliders */
            .checkbox-switch.round .slider {
                border-radius: 30px;
            }

            .checkbox-switch.round .slider:before {
                border-radius: 50%;
            } 
        </style>
        <?php
    }
}