<?php
/**
 * Created by PhpStorm.
 * User: marco
 * Date: 23/07/18
 * Time: 18.09
 */

function c_f_html_metabox()
{
    global $post;
    $style = '

    <style>
        a.cf_shortcode { padding: 10px; background-color: #333333; margin-right: 15px; color: white; font-weight: bold; cursor: pointer; display:inline-block; width: auto;float: left; margin-bottom: 15px;}
        a.cf_shortcode:hover {  background-color: #eeeeee; color: #333333; }
        .tooltip-inner {background-color: #111111; color: #eeeeee; padding: 5px; opacity: 0.8}
        .block_sc {float: left; width: 100%; position:relative}
        #wporg_box_id .inside {float:left; background-color: white; width: calc(100% - 25px);}
    
    </style>';
    $html = '<h3>Available short codes:</h3>';
    // <p><span class="cf_shortcode">[cf_mario]</span><span class="cf_shortcode">[cf_mario]</span><span class="cf_shortcode">[cf_mario]</span><span class="cf_shortcode">[cf_mario]</span></p>';
    if (have_rows('contact_form_rows')) :
        $html .= '<div class="block_sc"><p style="padding-top: 15px">'
        ?>

        <?php while (have_rows('contact_form_rows')) : the_row(); ?>
        <?php if (have_rows('contact_form_columns')) : ?>
            <?php while (have_rows('contact_form_columns')) : the_row(); ?>
                <?php //the_sub_field('width'); ?>
                <?php if (have_rows('contact_form_blocks')): ?>
                    <?php while (have_rows('contact_form_blocks')) : the_row(); ?>
                        <?php if (get_row_layout() !== '') : ?>
                            <?php //the_sub_field( 'id' ); ?>
                            <?php //the_sub_field( 'label' ); ?>
                            <?php if (get_sub_field('required') == 1) {
                                // echo 'true';
                            } else {
                                // echo 'false';
                            }


                            $block_type = get_row_layout();
                            if ($block_type == 'text_input') {

                                $type_prefix = 'text_';
                            }

                            $date_html = '';
                            if ($block_type == 'date_input') {

                                $type_prefix = 'date_';
                            }


                            $switcher_html = '';
                            if ($block_type == 'switcher') {
                                $type_prefix = 'switcher_';


                            }
                            $block_id = get_sub_field('id');
                            if ($block_type == 'google_recaptcha'){$block_id = 'google_recap';

                            }

                            $type_prefix = '';

                            $html .= '<a class="cf_shortcode" data-clipboard-text="[cf_'.$type_prefix. $block_id . ']"> [cf_' .$type_prefix. $block_id . '] </a>'
                            ?>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php else: ?>
                    <?php // no layouts found ?>
                <?php endif; ?>
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
    <?php endwhile;

        $html .= '</p></div>'
        ?>
    <?php else : ?>
        <?php $html .= '<p>No form fields</p>' ?>
    <?php endif;

    echo $style . $html . '
    <script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>
    <script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>

<script>
const buttonsClipBoard = document.querySelectorAll(".cf_shortcode");
const clipboard = new ClipboardJS(buttonsClipBoard);
console.log(buttonsClipBoard);
console.log(clipboard);


clipboard.on("success", function(e) {
        console.log(e);
        console.log("ssss");
    });

clipboard.on("error", function(e) {
        console.log("nooo");
        console.log(e);
    });
    
buttonsClipBoard.forEach(function(element) {
const instance = new Tooltip($(element), {
    title: "Copied to clipboard!",
    trigger: "manual",
});
instance.show();
instance.toggle();
$(element).click(function() {
          instance.toggle();
  setTimeout(function(){
      instance.toggle();
      },
       750);
})

});

//instance.show();
</script>
    ';

}

function add_metabox_to_contact_form()
{
    $screens = ['contact_form'];
    foreach ($screens as $screen) {
        add_meta_box(
            'wporg_box_id',           // Unique ID
            'Contact Form Shortcodes',  // Box title
            'c_f_html_metabox',  // Content callback, must be of type callable
            $screen                   // Post type
        );
    }
}

add_action('add_meta_boxes', 'add_metabox_to_contact_form');