<?php

namespace PWH_DCFH\App\Frontend\DiviContactForm\Features;

use DOMException;
use ET_Builder_Element;
use PWH_DCFH\App\Base\PWH_DCFH_Strings;
use PWH_DCFH\App\Controllers\PWH_DCFH_DOM;

if (!defined('ABSPATH')) {
    exit;
}
if (!class_exists('PWH_DCFH_Signature_Pad')) {
    class PWH_DCFH_Signature_Pad
    {
        public $render_slug;

        public $output;

        public $props = [];

        /**
         * Class Constructor
         */
        public function __construct($render_slug, $output, $props)
        {
            $this->render_slug = $render_slug;
            $this->output = $output;
            $this->props = $props;
        }

        /**
         * Render Output
         * @throws DOMException
         */
        public function output()
        {
            $dom = PWH_DCFH_DOM::dom($this->output);
            $input = $dom->getElementsByTagName('input');
            $p_tag = $dom->getElementsByTagName('p');
            if ((isset($input->length) && 0 !== $input->length) && (isset($p_tag->length) && 0 !== $p_tag->length)) {
                $frontend_i10 = PWH_DCFH_Strings::instance()->strings('frontend_i10');

                $config['background'] = isset($this->props['sp_background_color']) ? $this->props['sp_background_color'] : '#eee';
                $config['color'] = isset($this->props['sp_pen_color']) ? $this->props['sp_pen_color'] : '#000000';
                $config['width'] = isset($this->props['sp_width']) ? $this->props['sp_width'] : '300px';
                $config['height'] = isset($this->props['sp_height']) ? $this->props['sp_height'] : '150px';
                $config['pen_thickness'] = isset($this->props['sp_pen_thickness']) ? $this->props['sp_pen_thickness'] : '2';
                $config['save_as'] = 'png';
                $field_order_class = ET_Builder_Element::get_module_order_class($this->render_slug);
                //$field_id = pwh_dcfh_helpers()::get_field_index($field_order_class);
                $input_item = $input->item(0);
                $p_item = $p_tag->item(0);
                $input_name = $input_item->getAttribute('name');
                $input_item->setAttribute('class', 'et_pb_contact_hidden_input');
                $p_class = $p_item->getAttribute('class');
                $p_item->setAttribute('class', $p_class.' et_pb_signature_pad_container');
                $p_item->setAttribute('data-config', wp_json_encode($config));
                // Canvas
                $signature_ele = $dom->createElement('span');
                $signature_ele->setAttribute('class', 'signature__pad_inner');
                $p_item->appendChild($signature_ele);
                // Canvas
                $canvas_ele = $dom->createElement('canvas');
                $signature_ele->appendChild($canvas_ele);
                // Action Buttons
                $action_btns_ele = $dom->createElement('span');
                $action_btns_ele->setAttribute('class', 'action_buttons');
                $signature_ele->appendChild($action_btns_ele);
                $save_ele = $dom->createElement('a', $frontend_i10['siganture_save_btn_text']);
                $save_ele->setAttribute('class', 'save');
                $action_btns_ele->appendChild($save_ele);
                $clear_ele = $dom->createElement('a', $frontend_i10['siganture_clear_btn_text']);
                $clear_ele->setAttribute('class', 'clear');
                $action_btns_ele->appendChild($clear_ele);
                // Hidden Input
                $file_hidden_input = $dom->createElement('input');
                $file_hidden_input->setAttribute('type', 'hidden');
                $file_hidden_input->setAttribute('name', $input_name.'_is_signature_pad');
                $file_hidden_input->setAttribute('value', 'yes');
                $signature_ele->appendChild($file_hidden_input);
                // Description
                $description_ele = $dom->createElement('span');
                $description_ele->setAttribute('class', 'et_pb_signature_pad_message');
                $p_item->appendChild($description_ele);
                // Save
                $this->output = $dom->saveHTML();
            }

            return $this->output;
        }

        /**
         * Render Css
         * @return void
         */
        public function css()
        {
            // Canvas
            $d_sp_margin = pwh_dcfh_module_helpers()::get_responsive_margin_padding_border_props(et_pb_responsive_options()->get_property_values($this->props, 'sp_margin'));
            et_pb_responsive_options()->generate_responsive_css($d_sp_margin, '%%order_class%% .signature__pad_inner canvas', 'margin', $this->render_slug, '', 'custom_padding');
            $d_sp_padding = pwh_dcfh_module_helpers()::get_responsive_margin_padding_border_props(et_pb_responsive_options()->get_property_values($this->props, 'sp_padding'));
            et_pb_responsive_options()->generate_responsive_css($d_sp_padding, '%%order_class%% .signature__pad_inner canvas', 'padding', $this->render_slug, '', 'custom_padding');
            $d_sp_border = pwh_dcfh_module_helpers()::get_responsive_margin_padding_border_props(et_pb_responsive_options()->get_property_values($this->props, 'sp_border'));
            et_pb_responsive_options()->generate_responsive_css($d_sp_border, '%%order_class%% .signature__pad_inner canvas', 'border-radius', $this->render_slug, '', 'border-radius');
            $d_sp_border_color = et_pb_responsive_options()->get_property_values($this->props, 'sp_border_color');
            et_pb_responsive_options()->generate_responsive_css($d_sp_border_color, '%%order_class%% .signature__pad_inner canvas', 'border-color', $this->render_slug, '', 'color');
            $d_sp_border_width = et_pb_responsive_options()->get_property_values($this->props, 'sp_border_width');
            et_pb_responsive_options()->generate_responsive_css($d_sp_border_width, '%%order_class%% .signature__pad_inner canvas', 'border-width', $this->render_slug);
            $d_sp_border_style = et_pb_responsive_options()->get_property_values($this->props, 'sp_border_style');
            et_pb_responsive_options()->generate_responsive_css($d_sp_border_style, '%%order_class%% .signature__pad_inner canvas', 'border-style', $this->render_slug, '', 'select');
            $sp_shadow = isset($this->props['sp_shadow']) ? $this->props['sp_shadow'] : null;
            if (!empty($sp_shadow) && 'none' !== $sp_shadow) {
                $shadow = pwh_dcfh_module_helpers()::get_shadow_presets_values($sp_shadow);
                $horizontal = isset($this->props['sp_shadow_horizontal']) ? $this->props['sp_shadow_horizontal'] : $shadow['horizontal'];
                $vertical = isset($this->props['sp_shadow_vertical']) ? $this->props['sp_shadow_vertical'] : $shadow['vertical'];
                $blur = isset($this->props['sp_shadow_blur']) ? $this->props['sp_shadow_blur'] : $shadow['blur'];
                $spread = isset($this->props['sp_shadow_spread']) ? $this->props['sp_shadow_spread'] : $shadow['spread'];
                $color = isset($this->props['sp_shadow_color']) ? $this->props['sp_shadow_color'] : 'rgba(0,0,0,0.3)';
                $position = isset($this->props['sp_shadow_position']) ? $this->props['sp_shadow_position'] : $shadow['position'];
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner canvas',
                    'declaration' => "-webkit-box-shadow: $position $horizontal $vertical $blur $spread $color;-moz-box-shadow: $position $horizontal $vertical $blur $spread $color; box-shadow: $position $horizontal $vertical $blur $spread $color;",
                ]);
            }
            // Save Button
            $desktop_font = isset($this->props['sp_save_btn_font']) ? $this->props['sp_save_btn_font'] : null;
            $tablet_font = isset($this->props['sp_save_btn_font_tablet']) ? $this->props['sp_save_btn_font_tablet'] : null;
            $phone_font = isset($this->props['sp_save_btn_font_phone']) ? $this->props['sp_save_btn_font_phone'] : null;
            if (!empty($desktop_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($desktop_font)),
                ]);
            }
            if (!empty($tablet_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($tablet_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
                ]);
            }
            if (!empty($phone_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($phone_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
                ]);
            }
            $d_save_btn_size = et_pb_responsive_options()->get_property_values($this->props, 'sp_save_btn_font_size');
            et_pb_responsive_options()->generate_responsive_css($d_save_btn_size, '%%order_class%% .signature__pad_inner .save', 'font-size', $this->render_slug);
            $d_save_btn_color = et_pb_responsive_options()->get_property_values($this->props, 'sp_save_btn_color');
            et_pb_responsive_options()->generate_responsive_css($d_save_btn_color, '%%order_class%% .signature__pad_inner .save', 'color', $this->render_slug, '', 'color');
            if (et_pb_hover_options()->is_enabled('sp_save_btn_color', $this->props)) {
                $save_btn_hover = et_pb_hover_options()->get_value('sp_save_btn_color', $this->props);
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => "%%order_class%% .signature__pad_inner .save:hover",
                    'declaration' => "color:$save_btn_hover !important;"
                ]);
            }
            $d_save_btn_background = pwh_dcfh_module_helpers()::get_global_color(et_pb_responsive_options()->get_property_values($this->props, 'sp_save_btn_background_color'));
            et_pb_responsive_options()->generate_responsive_css($d_save_btn_background, '%%order_class%% .signature__pad_inner .save', 'background', $this->render_slug, '', 'color');
            if (et_pb_hover_options()->is_enabled('sp_save_btn_background_color', $this->props)) {
                $save_btn_background_hover = et_pb_hover_options()->get_value('sp_save_btn_background_color', $this->props);
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => "%%order_class%% .signature__pad_inner .save:hover",
                    'declaration' => "background:$save_btn_background_hover !important;"
                ]);
            }
            $d_save_btn_padding = pwh_dcfh_module_helpers()::get_responsive_margin_padding_border_props(et_pb_responsive_options()->get_property_values($this->props, 'sp_save_btn_padding'));
            et_pb_responsive_options()->generate_responsive_css($d_save_btn_padding, '%%order_class%% .signature__pad_inner .save', 'padding', $this->render_slug, '', 'custom_padding');
            // Clear Button
            $desktop_font = isset($this->props['sp_clear_btn_font']) ? $this->props['sp_clear_btn_font'] : null;
            $tablet_font = isset($this->props['sp_clear_btn_font_tablet']) ? $this->props['sp_clear_btn_font_tablet'] : null;
            $phone_font = isset($this->props['sp_clear_btn_font_phone']) ? $this->props['sp_clear_btn_font_phone'] : null;
            if (!empty($desktop_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($desktop_font)),
                ]);
            }
            if (!empty($tablet_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($tablet_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
                ]);
            }
            if (!empty($phone_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .signature__pad_inner .save',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($phone_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
                ]);
            }
            $d_clear_btn_size = et_pb_responsive_options()->get_property_values($this->props, 'sp_clear_btn_font_size');
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_size, '%%order_class%% .signature__pad_inner .clear', 'font-size', $this->render_slug);
            $d_clear_btn_color = et_pb_responsive_options()->get_property_values($this->props, 'sp_clear_btn_color');
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_color, '%%order_class%% .signature__pad_inner .clear', 'color', $this->render_slug, '', 'color');
            if (et_pb_hover_options()->is_enabled('sp_clear_btn_color', $this->props)) {
                $save_btn_hover = et_pb_hover_options()->get_value('sp_clear_btn_color', $this->props);
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => "%%order_class%% .signature__pad_inner .clear:hover",
                    'declaration' => "color:$save_btn_hover !important;"
                ]);
            }
            $d_clear_btn_background = pwh_dcfh_module_helpers()::get_global_color(et_pb_responsive_options()->get_property_values($this->props, 'sp_clear_btn_background_color'));
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_background, '%%order_class%% .signature__pad_inner .clear', 'background', $this->render_slug, '', 'color');
            if (et_pb_hover_options()->is_enabled('sp_clear_btn_background_color', $this->props)) {
                $save_btn_background_hover = et_pb_hover_options()->get_value('sp_clear_btn_background_color', $this->props);
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => "%%order_class%% .signature__pad_inner .clear:hover",
                    'declaration' => "background:$save_btn_background_hover !important;"
                ]);
            }
            $d_clear_btn_padding = pwh_dcfh_module_helpers()::get_responsive_margin_padding_border_props(et_pb_responsive_options()->get_property_values($this->props, 'sp_clear_btn_padding'));
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_padding, '%%order_class%% .signature__pad_inner .clear', 'padding', $this->render_slug, '', 'custom_padding');
            // Message
            $desktop_font = isset($this->props['sp_message_font']) ? $this->props['sp_message_font'] : null;
            $tablet_font = isset($this->props['sp_message_font_tablet']) ? $this->props['sp_message_font_tablet'] : null;
            $phone_font = isset($this->props['sp_message_font_phone']) ? $this->props['sp_message_font_phone'] : null;
            if (!empty($desktop_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .et_pb_signature_pad_message',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($desktop_font)),
                ]);
            }
            if (!empty($tablet_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .et_pb_signature_pad_message',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($tablet_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
                ]);
            }
            if (!empty($phone_font)) {
                ET_Builder_Element::set_style($this->render_slug, [
                    'selector' => '%%order_class%% .et_pb_signature_pad_message',
                    'declaration' => sprintf('%s;', et_builder_set_element_font($phone_font)),
                    'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
                ]);
            }
            $d_clear_btn_size = et_pb_responsive_options()->get_property_values($this->props, 'sp_message_font_size');
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_size, '%%order_class%% .et_pb_signature_pad_message', 'font-size', $this->render_slug);
            $d_clear_btn_color = et_pb_responsive_options()->get_property_values($this->props, 'sp_message_color');
            et_pb_responsive_options()->generate_responsive_css($d_clear_btn_color, '%%order_class%% .et_pb_signature_pad_message', 'color', $this->render_slug, '', 'color');

        }
    }
}