<?php
/**
 * Sign-in and registration widget for Elementor.
 *
 * @package Aslansheed\OTP
 */

namespace Aslansheed\OTP\Elementor;

use Aslansheed\OTP\Frontend\Assets;
use Aslansheed\OTP\Frontend\Form;
use Aslansheed\OTP\Frontend\Shortcode;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Widget_Base;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * One widget for the whole flow: sign in, code, password and registration.
 * Every text can be changed, each step can have a heading, and every part of
 * the form can be styled. The editor can preview any step with sample data.
 */
class Form_Widget extends Widget_Base {

	/**
	 * Prefix of every selector, so styles reach only this widget.
	 *
	 * @var string
	 */
	const ROOT = '{{WRAPPER}} .aslansheed-otp';

	/**
	 * {@inheritdoc}
	 */
	public function get_name() {
		return 'aslansheed_otp_form';
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_title() {
		return __( 'Sign in / Register (OTP)', 'aslansheed-login' );
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_icon() {
		return 'eicon-lock-user';
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_categories() {
		return array( Integration::CATEGORY );
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_keywords() {
		return array( 'login', 'register', 'sign in', 'otp', 'sms', 'account', 'aslansheed' );
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_style_depends() {
		return array( Assets::STYLE );
	}

	/**
	 * {@inheritdoc}
	 */
	public function get_script_depends() {
		return array( Assets::SCRIPT );
	}

	/**
	 * Registers every control.
	 *
	 * @return void
	 */
	protected function register_controls() {
		$this->content_controls();
		$this->text_controls();
		$this->style_controls();
	}

	/* ------------------------------------------------------------------ content */

	/**
	 * Behaviour and preview.
	 *
	 * @return void
	 */
	private function content_controls() {
		$this->start_controls_section( 'section_form', array( 'label' => __( 'Form', 'aslansheed-login' ) ) );

		$this->add_control(
			'redirect',
			array(
				'label'         => __( 'Redirect after sign-in', 'aslansheed-login' ),
				'type'          => Controls_Manager::URL,
				'placeholder'   => home_url( '/' ),
				'show_external' => false,
				'description'   => __( 'Leave empty to use the redirect set in the plugin settings.', 'aslansheed-login' ),
			)
		);

		$this->add_control(
			'google',
			array(
				'label'        => __( 'Show the Google button', 'aslansheed-login' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
				'description'  => __( 'Only appears when Google sign-in is turned on in the plugin settings.', 'aslansheed-login' ),
			)
		);

		$this->add_control(
			'signed_in',
			array(
				'label'   => __( 'When the visitor is signed in', 'aslansheed-login' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'message',
				'options' => array(
					'message' => __( 'Show a short message with a log out link', 'aslansheed-login' ),
					'hide'    => __( 'Show nothing', 'aslansheed-login' ),
				),
			)
		);

		$this->add_control(
			'auto_dark',
			array(
				'label'        => __( 'Follow the visitor’s dark mode', 'aslansheed-login' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => '',
				'return_value' => 'yes',
				'description'  => __( 'Off keeps exactly the colours you choose.', 'aslansheed-login' ),
			)
		);

		$this->add_control(
			'preview_heading',
			array(
				'label'     => __( 'Editor preview', 'aslansheed-login' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);

		$this->add_control(
			'preview_step',
			array(
				'label'       => __( 'Show this step', 'aslansheed-login' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => '',
				'options'     => array(
					''           => __( 'First step (live)', 'aslansheed-login' ),
					'channel'    => __( 'Choose how to get the code', 'aslansheed-login' ),
					'code'       => __( 'Enter the code', 'aslansheed-login' ),
					'email_code' => __( 'Confirm the email address', 'aslansheed-login' ),
					'password'   => __( 'Password', 'aslansheed-login' ),
					'register'   => __( 'Create the account', 'aslansheed-login' ),
					'two_factor' => __( '2FA code', 'aslansheed-login' ),
				),
				'description' => __( 'Only in the editor, so you can style every step. Visitors always see the real form.', 'aslansheed-login' ),
			)
		);

		$this->add_control(
			'preview_notice',
			array(
				'label'   => __( 'Show a sample message', 'aslansheed-login' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => array(
					''        => __( 'None', 'aslansheed-login' ),
					'error'   => __( 'Error', 'aslansheed-login' ),
					'success' => __( 'Success', 'aslansheed-login' ),
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Headings, labels, placeholders, buttons and messages.
	 *
	 * @return void
	 */
	private function text_controls() {
		$defaults = Form::strings();

		$this->start_controls_section( 'section_titles', array( 'label' => __( 'Headings', 'aslansheed-login' ) ) );
		$this->add_control(
			'titles_note',
			array(
				'type' => Controls_Manager::RAW_HTML,
				'raw'  => esc_html__( 'A heading and a line of text above each step. Leave empty for none.', 'aslansheed-login' ),
			)
		);

		foreach ( self::step_labels() as $step => $label ) {
			$this->add_control(
				'title_heading_' . $step,
				array(
					'label'     => $label,
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
				)
			);
			$this->add_control(
				'title_' . $step,
				array(
					'label'       => __( 'Heading', 'aslansheed-login' ),
					'type'        => Controls_Manager::TEXT,
					'label_block' => true,
					'dynamic'     => array( 'active' => true ),
				)
			);
			$this->add_control(
				'subtitle_' . $step,
				array(
					'label'       => __( 'Text below the heading', 'aslansheed-login' ),
					'type'        => Controls_Manager::TEXTAREA,
					'rows'        => 2,
					'label_block' => true,
				)
			);
		}

		$this->end_controls_section();

		$groups = array(
			'section_labels'  => array(
				__( 'Field labels', 'aslansheed-login' ),
				array(
					'identifier'        => __( 'Phone, email or username', 'aslansheed-login' ),
					'country'           => __( 'Country', 'aslansheed-login' ),
					'code'              => __( 'Verification code', 'aslansheed-login' ),
					'password'          => __( 'Password', 'aslansheed-login' ),
					'name'              => __( 'Display name', 'aslansheed-login' ),
					'first_name'        => __( 'First name', 'aslansheed-login' ),
					'last_name'         => __( 'Last name', 'aslansheed-login' ),
					'email'             => __( 'Email address', 'aslansheed-login' ),
					'username'          => __( 'Username', 'aslansheed-login' ),
					'password_confirm'  => __( 'Repeat the password', 'aslansheed-login' ),
					'national_id'       => __( 'National ID', 'aslansheed-login' ),
					'postal_code'       => __( 'Postal code', 'aslansheed-login' ),
					'birth_date'        => __( 'Birth date', 'aslansheed-login' ),
					'day'               => __( 'Day', 'aslansheed-login' ),
					'month'             => __( 'Month', 'aslansheed-login' ),
					'year'              => __( 'Year', 'aslansheed-login' ),
					'optional'          => __( 'Mark for optional fields', 'aslansheed-login' ),
					'tf_code'           => __( 'Authentication code', 'aslansheed-login' ),
					'tf_recovery_label' => __( 'Recovery code', 'aslansheed-login' ),
				),
			),
			'section_buttons' => array(
				__( 'Buttons and links', 'aslansheed-login' ),
				array(
					'continue_label'  => __( 'Continue', 'aslansheed-login' ),
					'verify'          => __( 'Verify', 'aslansheed-login' ),
					'sign_in'         => __( 'Sign in', 'aslansheed-login' ),
					'create_account'  => __( 'Create account', 'aslansheed-login' ),
					'resend'          => __( 'Resend code', 'aslansheed-login' ),
					'skip_email'      => __( 'Skip the email confirmation', 'aslansheed-login' ),
					/* translators: %s: literal marker the visitor-facing text must keep, replaced by the seconds left. */
					'resend_in'       => __( 'Resend countdown (keep %s for the seconds)', 'aslansheed-login' ),
					'change'          => __( 'Change the phone or email', 'aslansheed-login' ),
					'other_method'    => __( 'Send it another way', 'aslansheed-login' ),
					'use_password'    => __( 'Use password instead', 'aslansheed-login' ),
					'use_code'        => __( 'Send me a code instead', 'aslansheed-login' ),
					'tf_use_recovery' => __( 'Use a recovery code instead', 'aslansheed-login' ),
					'tf_use_app'      => __( 'Use the authenticator app instead', 'aslansheed-login' ),
					'or'              => __( 'Divider before the Google button', 'aslansheed-login' ),
				),
			),
			'section_texts'   => array(
				__( 'Messages and hints', 'aslansheed-login' ),
				array(
					'choose_channel'    => __( 'Choose how to get the code', 'aslansheed-login' ),
					'sent_to'           => __( 'Before the number the code was sent to', 'aslansheed-login' ),
					'code_sent'         => __( 'Code sent', 'aslansheed-login' ),
					'finish'            => __( 'Above the registration fields', 'aslansheed-login' ),
					'verify_email_hint' => __( 'Confirm the email address', 'aslansheed-login' ),
					'email_sent'        => __( 'Email code sent', 'aslansheed-login' ),
					'tf_hint'           => __( '2FA hint', 'aslansheed-login' ),
					'tf_recovery_hint'  => __( 'Recovery code hint', 'aslansheed-login' ),
					'terms'             => __( 'Terms checkbox', 'aslansheed-login' ),
					'terms_link'        => __( 'Terms link', 'aslansheed-login' ),
					'welcome'           => __( 'After signing in', 'aslansheed-login' ),
					'network'           => __( 'Connection problem', 'aslansheed-login' ),
					'captcha_needed'    => __( 'Security check missing', 'aslansheed-login' ),
					'strength_weak'     => __( 'Weak password', 'aslansheed-login' ),
					'strength_fair'     => __( 'Fair password', 'aslansheed-login' ),
					'strength_good'     => __( 'Good password', 'aslansheed-login' ),
					'strength_strong'   => __( 'Strong password', 'aslansheed-login' ),
				),
			),
		);

		foreach ( $groups as $section => $group ) {
			$this->start_controls_section( $section, array( 'label' => $group[0] ) );

			if ( 'section_labels' === $section ) {
				$this->add_control(
					'labels_note',
					array(
						'type' => Controls_Manager::RAW_HTML,
						'raw'  => esc_html__( 'Leave a field empty to keep the plugin’s own text, shown in grey.', 'aslansheed-login' ),
					)
				);
			}

			foreach ( $group[1] as $key => $label ) {
				$this->add_control(
					's_' . $key,
					array(
						'label'       => $label,
						'type'        => Controls_Manager::TEXT,
						'label_block' => true,
						'placeholder' => isset( $defaults[ $key ] ) && is_string( $defaults[ $key ] ) ? $defaults[ $key ] : '',
					)
				);
			}

			$this->end_controls_section();
		}

		$this->start_controls_section( 'section_placeholders', array( 'label' => __( 'Placeholders', 'aslansheed-login' ) ) );

		foreach ( Form::placeholder_fields() as $field ) {
			$this->add_control(
				'ph_' . $field,
				array(
					'label'       => self::placeholder_label( $field ),
					'type'        => Controls_Manager::TEXT,
					'label_block' => true,
				)
			);
		}

		$this->end_controls_section();
	}

	/**
	 * Names of the steps.
	 *
	 * @return array<string, string>
	 */
	private static function step_labels() {
		return array(
			'identifier' => __( 'First step: phone, email or username', 'aslansheed-login' ),
			'channel'    => __( 'Choose how to get the code', 'aslansheed-login' ),
			'code'       => __( 'Enter the code', 'aslansheed-login' ),
			'email_code' => __( 'Confirm the email address', 'aslansheed-login' ),
			'password'   => __( 'Password', 'aslansheed-login' ),
			'register'   => __( 'Create the account', 'aslansheed-login' ),
			'two_factor' => __( '2FA code', 'aslansheed-login' ),
		);
	}

	/**
	 * Name of a field in the placeholder list.
	 *
	 * @param string $field Field id.
	 * @return string
	 */
	private static function placeholder_label( $field ) {
		$labels = array(
			'identifier'       => __( 'Phone, email or username', 'aslansheed-login' ),
			'code'             => __( 'Verification code', 'aslansheed-login' ),
			'password'         => __( 'Password', 'aslansheed-login' ),
			'name'             => __( 'Display name', 'aslansheed-login' ),
			'first_name'       => __( 'First name', 'aslansheed-login' ),
			'last_name'        => __( 'Last name', 'aslansheed-login' ),
			'email'            => __( 'Email address', 'aslansheed-login' ),
			'username'         => __( 'Username', 'aslansheed-login' ),
			'password_confirm' => __( 'Repeat the password', 'aslansheed-login' ),
			'national_id'      => __( 'National ID', 'aslansheed-login' ),
			'postal_code'      => __( 'Postal code', 'aslansheed-login' ),
			'twofa'            => __( '2FA code', 'aslansheed-login' ),
		);

		return isset( $labels[ $field ] ) ? $labels[ $field ] : $field;
	}

	/* ------------------------------------------------------------------ style */

	/**
	 * Every style section.
	 *
	 * @return void
	 */
	private function style_controls() {
		$root = self::ROOT;

		// Container.
		$this->style_section( 'style_container', __( 'Form box', 'aslansheed-login' ) );
		$this->add_control(
			'accent',
			array(
				'label'       => __( 'Accent colour', 'aslansheed-login' ),
				'type'        => Controls_Manager::COLOR,
				'description' => __( 'Used for the button, links and focus ring unless you set them below.', 'aslansheed-login' ),
			)
		);
		$this->add_responsive_control(
			'box_width',
			array(
				'label'      => __( 'Maximum width', 'aslansheed-login' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%', 'vw' ),
				'range'      => array(
					'px' => array(
						'min' => 240,
						'max' => 900,
					),
					'%'  => array(
						'min' => 20,
						'max' => 100,
					),
				),
				'selectors'  => array( $root => 'max-width: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_control(
			'box_align',
			array(
				'label'                => __( 'Position', 'aslansheed-login' ),
				'type'                 => Controls_Manager::CHOOSE,
				'options'              => array(
					'left'   => array(
						'title' => __( 'Left', 'aslansheed-login' ),
						'icon'  => 'eicon-h-align-left',
					),
					'center' => array(
						'title' => __( 'Centre', 'aslansheed-login' ),
						'icon'  => 'eicon-h-align-center',
					),
					'right'  => array(
						'title' => __( 'Right', 'aslansheed-login' ),
						'icon'  => 'eicon-h-align-right',
					),
				),
				'selectors_dictionary' => array(
					'left'   => 'margin-left: 0; margin-right: auto;',
					'center' => 'margin-left: auto; margin-right: auto;',
					'right'  => 'margin-left: auto; margin-right: 0;',
				),
				'selectors'            => array( $root => '{{VALUE}}' ),
			)
		);
		$this->add_control(
			'box_text_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'box_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => $root,
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'box_border',
				'selector' => $root,
			)
		);
		$this->add_responsive_control(
			'box_radius',
			array(
				'label'      => __( 'Corner radius', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array( $root => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'box_padding',
			array(
				'label'      => __( 'Padding', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em', '%' ),
				'selectors'  => array( $root => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'box_shadow',
				'selector' => $root,
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'box_typography',
				'label'    => __( 'Base typography', 'aslansheed-login' ),
				'selector' => $root,
			)
		);
		$this->end_controls_section();

		// Headings.
		$this->style_section( 'style_title', __( 'Heading', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'selector' => $root . ' .aslo-title',
			)
		);
		$this->add_control(
			'title_color',
			array(
				'label'     => __( 'Colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-title' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'title_align',
			array(
				'label'     => __( 'Alignment', 'aslansheed-login' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => self::align_options(),
				'selectors' => array( $root . ' .aslo-title' => 'text-align: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'title_gap',
			array(
				'label'     => __( 'Space below', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'selectors' => array( $root . ' .aslo-title' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// Sub heading and hints.
		$this->style_section( 'style_hint', __( 'Text below the heading and hints', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'hint_typography',
				'selector' => $root . ' .aslo-subtitle, ' . $root . ' .aslo-hint',
			)
		);
		$this->add_control(
			'hint_color',
			array(
				'label'     => __( 'Colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-subtitle, ' . $root . ' .aslo-hint' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'hint_align',
			array(
				'label'     => __( 'Alignment', 'aslansheed-login' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => self::align_options(),
				'selectors' => array( $root . ' .aslo-subtitle, ' . $root . ' .aslo-hint' => 'text-align: {{VALUE}};' ),
			)
		);
		$this->end_controls_section();

		// Labels.
		$this->style_section( 'style_label', __( 'Field labels', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'label_typography',
				'selector' => $root . ' .aslo-field > label',
			)
		);
		$this->add_control(
			'label_color',
			array(
				'label'     => __( 'Colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-field > label' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'label_gap',
			array(
				'label'     => __( 'Space below', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 30,
					),
				),
				'selectors' => array( $root . ' .aslo-field > label' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'field_gap',
			array(
				'label'     => __( 'Space between fields', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'selectors' => array( $root . ' .aslo-field' => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// Inputs.
		$input = $root . ' .aslo-input';
		$this->style_section( 'style_input', __( 'Input fields', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'input_typography',
				'selector' => $input,
			)
		);
		$this->add_responsive_control(
			'input_height',
			array(
				'label'     => __( 'Height', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 28,
						'max' => 100,
					),
				),
				'selectors' => array( $input => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'input_padding',
			array(
				'label'      => __( 'Padding', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array( $input => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'input_radius',
			array(
				'label'      => __( 'Corner radius', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array( $input => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->start_controls_tabs( 'input_tabs' );
		$this->start_controls_tab( 'input_normal', array( 'label' => __( 'Normal', 'aslansheed-login' ) ) );
		$this->add_control(
			'input_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'input_placeholder',
			array(
				'label'     => __( 'Placeholder colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input . '::placeholder' => 'color: {{VALUE}}; opacity: 1;' ),
			)
		);
		$this->add_control(
			'input_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'input_border',
				'selector' => $input,
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'input_shadow',
				'selector' => $input,
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab( 'input_focus_tab', array( 'label' => __( 'Focus', 'aslansheed-login' ) ) );
		$this->add_control(
			'input_focus_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input . ':focus' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'input_focus_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input . ':focus' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'input_focus_border',
			array(
				'label'     => __( 'Border colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input . ':focus' => 'border-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'input_focus_ring',
			array(
				'label'     => __( 'Focus ring colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $input . ':focus' => 'outline-color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'input_focus_shadow',
				'selector' => $input . ':focus',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'code_spacing_heading',
			array(
				'label'     => __( 'Code fields', 'aslansheed-login' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_responsive_control(
			'code_spacing',
			array(
				'label'     => __( 'Space between digits', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 20,
					),
				),
				'selectors' => array( $root . ' .aslo-code' => 'letter-spacing: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'code_size',
			array(
				'label'     => __( 'Digit size', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 12,
						'max' => 48,
					),
				),
				'selectors' => array( $root . ' .aslo-code' => 'font-size: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// Primary button.
		$button = $root . ' .aslo-button.aslo-primary';
		$this->style_section( 'style_button', __( 'Main button', 'aslansheed-login' ) );
		$this->add_control(
			'button_width',
			array(
				'label'                => __( 'Width', 'aslansheed-login' ),
				'type'                 => Controls_Manager::SELECT,
				'default'              => 'full',
				'options'              => array(
					'full'   => __( 'Full width', 'aslansheed-login' ),
					'left'   => __( 'Fit the text, left', 'aslansheed-login' ),
					'center' => __( 'Fit the text, centre', 'aslansheed-login' ),
					'right'  => __( 'Fit the text, right', 'aslansheed-login' ),
				),
				'selectors_dictionary' => array(
					'full'   => 'display: block; width: 100%;',
					'left'   => 'display: block; width: auto; margin-left: 0; margin-right: auto;',
					'center' => 'display: block; width: auto; margin-left: auto; margin-right: auto;',
					'right'  => 'display: block; width: auto; margin-left: auto; margin-right: 0;',
				),
				'selectors'            => array( $button => '{{VALUE}}' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'button_typography',
				'selector' => $button,
			)
		);
		$this->add_responsive_control(
			'button_height',
			array(
				'label'     => __( 'Height', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 28,
						'max' => 100,
					),
				),
				'selectors' => array( $button => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'button_padding',
			array(
				'label'      => __( 'Padding', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array( $button => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'button_radius',
			array(
				'label'      => __( 'Corner radius', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array( $button => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'button_border',
				'selector' => $button,
			)
		);
		$this->start_controls_tabs( 'button_tabs' );
		$this->start_controls_tab( 'button_normal', array( 'label' => __( 'Normal', 'aslansheed-login' ) ) );
		$this->add_control(
			'button_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $button => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'button_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => $button,
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'button_shadow',
				'selector' => $button,
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab( 'button_hover_tab', array( 'label' => __( 'Hover', 'aslansheed-login' ) ) );
		$this->add_control(
			'button_hover_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $button . ':hover:not(:disabled)' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'     => 'button_hover_background',
				'types'    => array( 'classic', 'gradient' ),
				'selector' => $button . ':hover:not(:disabled)',
			)
		);
		$this->add_control(
			'button_hover_border',
			array(
				'label'     => __( 'Border colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $button . ':hover:not(:disabled)' => 'border-color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'button_hover_shadow',
				'selector' => $button . ':hover:not(:disabled)',
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->end_controls_section();

		// Secondary buttons.
		$second = $root . ' .aslo-button.aslo-secondary';
		$this->style_section( 'style_secondary', __( 'Choice buttons', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'second_typography',
				'selector' => $second,
			)
		);
		$this->add_responsive_control(
			'second_height',
			array(
				'label'     => __( 'Height', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 28,
						'max' => 100,
					),
				),
				'selectors' => array( $second => 'height: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'second_radius',
			array(
				'label'      => __( 'Corner radius', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array( $second => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			array(
				'name'     => 'second_border',
				'selector' => $second,
			)
		);
		$this->start_controls_tabs( 'second_tabs' );
		$this->start_controls_tab( 'second_normal', array( 'label' => __( 'Normal', 'aslansheed-login' ) ) );
		$this->add_control(
			'second_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $second => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'second_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $second => 'background-color: {{VALUE}};' ),
			)
		);
		$this->end_controls_tab();
		$this->start_controls_tab( 'second_hover_tab', array( 'label' => __( 'Hover', 'aslansheed-login' ) ) );
		$this->add_control(
			'second_hover_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $second . ':hover:not(:disabled)' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'second_hover_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $second . ':hover:not(:disabled)' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'second_hover_border',
			array(
				'label'     => __( 'Border colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $second . ':hover:not(:disabled)' => 'border-color: {{VALUE}};' ),
			)
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_responsive_control(
			'second_gap',
			array(
				'label'     => __( 'Space between buttons', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 40,
					),
				),
				'selectors' => array( $second => 'margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// Text links.
		$link = $root . ' .aslo-button.aslo-link';
		$this->style_section( 'style_link', __( 'Links', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'link_typography',
				'selector' => $link,
			)
		);
		$this->add_control(
			'link_color',
			array(
				'label'     => __( 'Colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $link . ', ' . $root . ' .aslo-check a' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'link_hover_color',
			array(
				'label'     => __( 'Hover colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $link . ':hover:not(:disabled), ' . $root . ' .aslo-check a:hover' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'link_disabled_color',
			array(
				'label'     => __( 'Colour while waiting (resend countdown)', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $link . ':disabled' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'actions_gap',
			array(
				'label'     => __( 'Space above the links', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 40,
					),
				),
				'selectors' => array( $root . ' .aslo-actions' => 'margin-top: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->end_controls_section();

		// Notices.
		$this->style_section( 'style_notice', __( 'Messages', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'notice_typography',
				'selector' => $root . ' .aslo-notice',
			)
		);
		$this->add_responsive_control(
			'notice_padding',
			array(
				'label'      => __( 'Padding', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em' ),
				'selectors'  => array( $root . ' .aslo-notice' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_responsive_control(
			'notice_radius',
			array(
				'label'      => __( 'Corner radius', 'aslansheed-login' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array( $root . ' .aslo-notice' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ),
			)
		);
		$this->add_control(
			'error_heading',
			array(
				'label'     => __( 'Error', 'aslansheed-login' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_control(
			'error_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-notice.aslo-error' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'error_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-notice.aslo-error' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'success_heading',
			array(
				'label'     => __( 'Success', 'aslansheed-login' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			)
		);
		$this->add_control(
			'success_color',
			array(
				'label'     => __( 'Text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-notice.aslo-success' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'success_bg',
			array(
				'label'     => __( 'Background', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-notice.aslo-success' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->end_controls_section();

		// Checkbox and extras.
		$this->style_section( 'style_extra', __( 'Terms, divider and strength meter', 'aslansheed-login' ) );
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'check_typography',
				'label'    => __( 'Terms text', 'aslansheed-login' ),
				'selector' => $root . ' .aslo-check',
			)
		);
		$this->add_control(
			'check_color',
			array(
				'label'     => __( 'Terms text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-check' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'check_accent',
			array(
				'label'     => __( 'Checkbox colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-check input' => 'accent-color: {{VALUE}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'divider_typography',
				'label'     => __( 'Divider text', 'aslansheed-login' ),
				'selector'  => $root . ' .aslo-divider',
				'separator' => 'before',
			)
		);
		$this->add_control(
			'divider_color',
			array(
				'label'     => __( 'Divider text colour', 'aslansheed-login' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( $root . ' .aslo-divider' => 'color: {{VALUE}};' ),
			)
		);
		$this->add_responsive_control(
			'divider_gap',
			array(
				'label'     => __( 'Space around the divider', 'aslansheed-login' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'selectors' => array( $root . ' .aslo-divider' => 'margin-top: {{SIZE}}{{UNIT}}; margin-bottom: {{SIZE}}{{UNIT}};' ),
			)
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'strength_typography',
				'label'     => __( 'Strength meter text', 'aslansheed-login' ),
				'selector'  => $root . ' .aslo-strength',
				'separator' => 'before',
			)
		);
		$this->end_controls_section();
	}

	/**
	 * Opens a section on the Style tab.
	 *
	 * @param string $id    Section id.
	 * @param string $label Section label.
	 * @return void
	 */
	private function style_section( $id, $label ) {
		$this->start_controls_section(
			$id,
			array(
				'label' => $label,
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
	}

	/**
	 * Left, centre and right choices.
	 *
	 * @return array
	 */
	private static function align_options() {
		return array(
			'left'   => array(
				'title' => __( 'Left', 'aslansheed-login' ),
				'icon'  => 'eicon-text-align-left',
			),
			'center' => array(
				'title' => __( 'Centre', 'aslansheed-login' ),
				'icon'  => 'eicon-text-align-center',
			),
			'right'  => array(
				'title' => __( 'Right', 'aslansheed-login' ),
				'icon'  => 'eicon-text-align-right',
			),
		);
	}

	/* ------------------------------------------------------------------ output */

	/**
	 * Prints the widget.
	 *
	 * @return void
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();
		$editing  = \Elementor\Plugin::$instance->editor->is_edit_mode() || \Elementor\Plugin::$instance->preview->is_preview_mode();

		if ( is_user_logged_in() && ! $editing ) {
			if ( 'hide' !== $settings['signed_in'] ) {
				echo Shortcode::render( array() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in Shortcode::render().
			}

			return;
		}

		$args = array(
			'redirect'       => isset( $settings['redirect']['url'] ) ? (string) $settings['redirect']['url'] : '',
			'google'         => 'yes' === $settings['google'],
			'auto_dark'      => 'yes' === $settings['auto_dark'],
			'accent'         => isset( $settings['accent'] ) ? (string) $settings['accent'] : '',
			'strings'        => array(),
			'titles'         => array(),
			'subtitles'      => array(),
			'placeholders'   => array(),
			'preview'        => $editing && isset( $settings['preview_step'] ) ? (string) $settings['preview_step'] : '',
			'preview_notice' => $editing && isset( $settings['preview_notice'] ) ? (string) $settings['preview_notice'] : '',
		);

		foreach ( array_keys( Form::strings() ) as $key ) {
			if ( ! empty( $settings[ 's_' . $key ] ) ) {
				$args['strings'][ $key ] = (string) $settings[ 's_' . $key ];
			}
		}

		foreach ( Form::steps() as $step ) {
			if ( ! empty( $settings[ 'title_' . $step ] ) ) {
				$args['titles'][ $step ] = (string) $settings[ 'title_' . $step ];
			}

			if ( ! empty( $settings[ 'subtitle_' . $step ] ) ) {
				$args['subtitles'][ $step ] = (string) $settings[ 'subtitle_' . $step ];
			}
		}

		foreach ( Form::placeholder_fields() as $field ) {
			if ( ! empty( $settings[ 'ph_' . $field ] ) ) {
				$args['placeholders'][ $field ] = (string) $settings[ 'ph_' . $field ];
			}
		}

		echo Form::render( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in Form::render().
	}
}