<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
use \Elementor\Widget_Base;
use \Elementor\Controls_Manager;
use \Sifency\Traits\Sifency_Animation_Controls;
use Sifency\Traits\Sifency_Animation_Manager;
use Sifency\Traits\Sifency_Comment_Box_Controls;

class Sifency_Widget_Commentbox extends Widget_Base {
    use Sifency_Animation_Controls;
    use Sifency_Comment_Box_Controls;

    public function get_name() {
        return 'comment-box';
    }

    public function get_title() {
        return __('Sifency Post Comments', 'sifency-addons');
    }

    public function get_icon() {
        return 'eicon-comments';
    }

    public function get_categories() {
        return ['sifency-post-components'];
    }
    public function get_style_depends() {
	    return [ 'sifency-frontend-style', 'sifency-post-single-style' ];
    }

    public function get_script_depends() {
        return [ 'sifency-frontend-script' ];
    }
    protected function register_controls() {
        $this->add_sifency_comment_box_controls();
        $this->add_sifency_animation_controls();
        $this->update_control(
            'sifency_animation_target',
            [
                'type' => Controls_Manager::HIDDEN,
                'default' => 'wrapper',
            ]
        );
    }

    /**
     * Render the widget output on the frontend.
     *
     * @since 1.0.4
     * @access protected
     */
    protected function render() {
        if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
            $this->add_render_attribute( 'wrapper', 'class', 'sifency-comments-area' );
            ?>
            <div <?php echo 
                
                wp_kses_post ($this->get_render_attribute_string('wrapper')); ?>>
                <?php $this->render_editor_placeholder(); ?>
            </div>
            <?php
            return;
        }

        if ( ! comments_open() && get_comments_number() === 0 ) {
            return;
        }

        $settings = $this->get_settings_for_display();
        $animation_manager = new Sifency_Animation_Manager($settings);
        $wrapper_classes = ['sifency-comments-area'];
        $wrapper_attrs_string = $animation_manager->get_wrapper_attributes($wrapper_classes);
        
        ?>
        <div <?php echo wp_kses_post ($wrapper_attrs_string); ?>>
            <?php comments_template(); ?>
        </div>
        <?php
    }

    /**
	 * Render the placeholder content for the editor's initial load.
	 *
	 * This provides a static HTML structure that mimics the real comments area
	 * for styling purposes. It is rendered via PHP.
	 *
	 * @since 1.0.4
	 * @access protected
	 */
    protected function render_editor_placeholder() {
        ?>
        <div id="comments" class="comments-area">
			<h2 class="comments-title">
				<?php
				printf(
                    /* translators: %s: Number Of Comments. */
					esc_html( _n( '%1$s Comment', '%1$s Comments', 2, 'sifency-addons' ) ),
					'<span class="comments-number">2</span>'
				);
				?>
			</h2>

			<ol class="comment-list">
				<li class="comment even thread-even depth-1" id="comment-1">
					<article id="div-comment-1" class="comment-body">
						<div class="comment-meta">
							<div class="comment-author vcard">
								<img alt="" src="<?php echo esc_url( get_avatar_url('placeholder1@example.com') ); ?>" class="avatar avatar-60 photo" height="60" width="60">
								<b class="fn"><?php echo esc_html__('John Doe', 'sifency-addons'); ?></b>
								<span class="says"><?php echo esc_html__('says:', 'sifency-addons'); ?></span>
							</div>
							<div class="comment-metadata">
								<a href="#">
									<time datetime="2023-10-27T10:00:00+00:00"><?php echo esc_html__('October 27, 2023 at 10:00 am', 'sifency-addons'); ?></time>
								</a>
							</div>
						</footer>
						<div class="comment-content">
							<p><?php echo esc_html__('This is a demo comment. You can style its appearance using the controls in the Style tab. This helps in visualizing how the comments section will look on the live site.', 'sifency-addons'); ?></p>
						</div>
						<div class="reply">
							<a rel="nofollow" class="comment-reply-link" href="#"><?php echo esc_html__('Reply', 'sifency-addons'); ?></a>
						</div>
					</article>
					<ol class="children">
						<li id="comment-2" class="comment byuser comment-author-admin bypostauthor odd alt depth-2">
							<article id="div-comment-2" class="comment-body">
								<div class="comment-meta">
									<div class="comment-author vcard">
                                    <img alt="" src="<?php echo esc_url( get_avatar_url('placeholder2@example.com') ); ?>" class="avatar avatar-60 photo" height="60" width="60">
										<b class="fn"><?php echo esc_html__('Jane Smith (Author)', 'sifency-addons'); ?></b>
										<span class="says"><?php echo esc_html__('says:', 'sifency-addons'); ?></span>
									</div>
									<div class="comment-metadata">
										<a href="#"><time><?php echo esc_html__('October 27, 2023 at 10:05 am', 'sifency-addons'); ?></time></a>
									</div>
								</footer>
								<div class="comment-content">
									<p><?php echo esc_html__('This is a nested reply from the post author to demonstrate different levels of comments.', 'sifency-addons'); ?></p>
								</div>
								<div class="reply">
									<a rel="nofollow" class="comment-reply-link" href="#"><?php echo esc_html__('Reply', 'sifency-addons'); ?></a>
								</div>
							</article>
						</li>
					</ol>
				</li>
			</ol>

			<div id="respond" class="comment-respond">
				<h3 id="reply-title" class="comment-reply-title">
                    <?php echo esc_html__('Leave a Reply', 'sifency-addons'); ?>
                </h3>
				<form action="#" method="post" id="commentform" class="comment-form">
					<p class="comment-notes">
						<span id="email-notes"><?php echo esc_html__('Your email address will not be published.', 'sifency-addons'); ?></span>
					</p>
					<p class="comment-form-comment">
						<label for="comment"><?php echo esc_html__('Comment', 'sifency-addons'); ?></label>
						<textarea id="comment" name="comment" cols="45" rows="8" required></textarea>
					</p>
					<p class="comment-form-author">
						<label for="author"><?php echo esc_html__('Name', 'sifency-addons'); ?></label>
						<input id="author" name="author" type="text" value="" size="30" required>
					</p>
					<p class="comment-form-email">
						<label for="email"><?php echo esc_html__('Email', 'sifency-addons'); ?></label>
						<input id="email" name="email" type="email" value="" size="30" required>
					</p>
					<p class="form-submit">
						<input name="submit" type="submit" id="submit" class="submit" value="<?php echo esc_attr__('Post Comment', 'sifency-addons'); ?>">
					</p>
				</form>
			</div>
		</div>
        <?php
    }

    /**
	 * Render the widget output in the editor for live preview.
	 *
	 * Written as a Backbone JavaScript template. This provides a static HTML structure
     * so that style controls can be previewed instantly.
	 *
	 * @since 1.0.4
	 * @access protected
	 */
	protected function _content_template() {
        $placeholder_avatar_url = \Elementor\Utils::get_placeholder_image_src(); ?>
        <div class="sifency-comments-area">
            <div id="comments" class="comments-area">
                <h2 class="comments-title">
                    <span class="comments-number">2</span> Comments
                </h2>

                <ol class="comment-list">
                    <li class="comment even thread-even depth-1" id="comment-1">
                        <article id="div-comment-1" class="comment-body">
                            <div class="comment-meta">
                                <div class="comment-author vcard">
                                    <img alt="" src="<?php echo esc_url($placeholder_avatar_url); ?>" class="avatar avatar-60 photo" height="60" width="60">
                                    <b class="fn">John Doe</b> <span class="says">says:</span>
                                </div>
                                <div class="comment-metadata">
                                    <a href="#"><time>October 27, 2023 at 10:00 am</time></a>
                                </div>
                            </footer>
                            <div class="comment-content">
                                <p>This is a demo comment. You can style its appearance using the controls in the Style tab. This helps in visualizing how the comments section will look on the live site.</p>
                            </div>
                            <div class="reply">
                                <a rel="nofollow" class="comment-reply-link" href="#">Reply</a>
                            </div>
                        </article>
                        <ol class="children">
                            <li id="comment-2" class="comment byuser comment-author-admin bypostauthor odd alt depth-2">
                                <article id="div-comment-2" class="comment-body">
                                    <div class="comment-meta">
                                        <div class="comment-author vcard">
                                        <img alt="" src="<?php echo esc_url($placeholder_avatar_url); ?>" class="avatar avatar-60 photo" height="60" width="60">
                                            <b class="fn">Jane Smith (Author)</b> <span class="says">says:</span>
                                        </div>
                                        <div class="comment-metadata">
                                            <a href="#"><time>October 27, 2023 at 10:05 am</time></a>
                                        </div>
                                    </footer>
                                    <div class="comment-content">
                                        <p>This is a nested reply from the post author to demonstrate different levels of comments.</p>
                                    </div>
                                    <div class="reply">
                                        <a rel="nofollow" class="comment-reply-link" href="#">Reply</a>
                                    </div>
                                </article>
                            </li>
                        </ol>
                    </li>
                </ol>

                <div id="respond" class="comment-respond">
                    <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3>
                    <form action="#" method="post" id="commentform" class="comment-form">
                        <p class="comment-notes">
                            <span id="email-notes">Your email address will not be published.</span>
                        </p>
                        <p class="comment-form-comment">
                            <label for="comment">Comment</label>
                            <textarea id="comment" name="comment" cols="45" rows="8" required></textarea>
                        </p>
                        <p class="comment-form-author">
                            <label for="author">Name</label>
                            <input id="author" name="author" type="text" value="" size="30" required>
                        </p>
                        <p class="comment-form-email">
                            <label for="email">Email</label>
                            <input id="email" name="email" type="email" value="" size="30" required>
                        </p>
                        <p class="form-submit">
                            <input name="submit" type="submit" id="submit" class="submit" value="Post Comment">
                        </p>
                    </form>
                </div>
            </div>
        </div>
		<?php
	}
}