<?php
/**
 * Copy to Clipboard element.
 *
 * @package BricksExtras
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Copy to Clipboard element class.
 */
class X_Copy_To_Clipboard extends \Bricks\Element {

	/**
	 * Element category.
	 *
	 * @var string
	 */
	public $category = 'extras';

	/**
	 * Element name.
	 *
	 * @var string
	 */
	public $name = 'xcopytoclipboard';

	/**
	 * Element icon.
	 *
	 * @var string
	 */
	public $icon = 'ti-files';

	/**
	 * CSS selector.
	 *
	 * @var string
	 */
	public $css_selector = '';

	/**
	 * Required scripts.
	 *
	 * @var array
	 */
	public $scripts = array( 'xCopyToClipBoard', 'xCopyToClipboardPopover' );

	/**
	 * Element is nestable.
	 *
	 * @var bool
	 */
	public $nestable = true;

	/**
	 * Script localized flag.
	 *
	 * @var bool
	 */
	private static $script_localized = false;

	/**
	 * Get element label.
	 */
	public function get_label() {
		return esc_html__( 'Copy to clipboard', 'bricks' );
	}

	/**
	 * Get element keywords.
	 */
	public function get_keywords() {
		return array( 'copy to clipboard', 'clipboard' );
	}

	/**
	 * Set control groups.
	 */
	public function set_control_groups() {

		$this->control_groups['icons'] = array(
			'title' => esc_html__( 'Icons', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['button'] = array(
			'title' => esc_html__( 'Button', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['tooltip'] = array(
			'title' => esc_html__( 'Tooltip', 'bricks' ),
			'tab'   => 'content',
		);

		$this->control_groups['behaviour'] = array(
			'title' => esc_html__( 'Behavior', 'bricksextras' ),
			'tab'   => 'content',
		);
	}

	/**
	 * Set element controls.
	 */
	public function set_controls() {

		$inner_selector = '.x-copy-to-clipboard';

		$this->controls['_display']['css'][0]['selector']        = $inner_selector;
		$this->controls['_flexDirection']['css'][0]['selector']  = $inner_selector;
		$this->controls['_alignSelf']['css'][0]['selector']      = $inner_selector;
		$this->controls['_justifyContent']['css'][0]['selector'] = $inner_selector;
		$this->controls['_alignItems']['css'][0]['selector']     = $inner_selector;
		$this->controls['_gap']['css'][0]['selector']            = $inner_selector;
		$this->controls['_padding']['css'][0]['selector']        = $inner_selector;

		$this->controls['_border']['css'][0]['selector']    = $inner_selector;
		$this->controls['_boxShadow']['css'][0]['selector'] = $inner_selector;
		$this->controls['_gradient']['css'][0]['selector']  = $inner_selector;
		$this->controls['_transform']['css'][0]['selector'] = $inner_selector;

		$this->controls['copyFrom'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Text to copy', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'selector'     => esc_html__( 'CSS selector', 'bricks' ),
				'dynamic_data' => esc_html__( 'Dynamic data', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Selector', 'bricks' ),
		);

		$this->controls['copySelector'] = array(
			'tab'       => 'content',
			'label'     => esc_html__( 'CSS selector', 'bricks' ),
			'info'      => '(' . esc_html__( 'Element containing the text', 'bricksextras' ) . ')',
			'type'      => 'text',
			'inline'    => true,
			'clearable' => false,
			'required'  => array( 'copyFrom', '!=', 'dynamic_data' ),
		);

		$this->controls['componentScope'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Component scope', 'bricksextras' ),
			'type'        => 'select',
			'options'     => array(
				'true'  => esc_html__( 'True', 'bricks' ),
				'false' => esc_html__( 'False', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'False', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'copyFrom', '!=', 'dynamic_data' ),
		);

		$this->controls['copytext'] = array(
			'tab'       => 'content',
			'label'     => esc_html__( 'Text', 'bricks' ),
			'type'      => 'textarea',
			'clearable' => false,
			'required'  => array( 'copyFrom', '=', 'dynamic_data' ),
		);

		$this->controls['stripTags'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Strip HTML tags', 'bricksextras' ),
			'type'        => 'select',
			'inline'      => true,
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'required'    => array( 'copyFrom', '=', 'dynamic_data' ),
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		/*  icons */

		$this->controls['maybeIcons'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Icons', 'bricks' ),
			'type'        => 'select',
			'group'       => 'icons',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Enable', 'bricks' ),
		);

		$this->controls['copyIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Copy', 'bricks' ) . ')',
			'group'    => 'icons',
			'type'     => 'icon',
			'css'      => array(
				array(
					'selector' => '.x_copy-icon',
				),
			),
			'default'  => array(
				'library' => 'themify',
				'icon'    => 'ti-files',
			),
			'required' => array( 'maybeIcons', '!=', 'disable' ),
		);

		$this->controls['afterPressed'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Action', 'bricks' ) . ' (' . esc_html__( 'Copied', 'bricks' ) . ')',
			'type'        => 'select',
			'group'       => 'icons',
			'options'     => array(
				'check' => esc_html__( 'Animated checkmark', 'bricksextras' ),
				'icon'  => esc_html__( 'Icon', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Animated checkmark', 'bricksextras' ),
			'required'    => array( 'maybeIcons', '!=', 'disable' ),
		);

		$this->controls['copiedIcon'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Icon', 'bricks' ) . ' (' . esc_html__( 'Copied', 'bricks' ) . ')',
			'group'    => 'icons',
			'type'     => 'icon',
			'css'      => array(
				array(
					'selector' => '.x_copied-icon',
				),
			),
			'default'  => array(
				'library' => 'themify',
				'icon'    => 'ti-check',
			),
			'required' => array(
				array( 'afterPressed', '=', 'icon' ),
				array( 'maybeIcons', '!=', 'disable' ),
			),
		);

		$this->controls['iconSize'] = array(
			'tab'      => 'content',
			'group'    => 'icons',
			'type'     => 'number',
			'units'    => true,
			'label'    => esc_html__( 'Icon size', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'font-size',
					'selector' => '.x-copy-to-clipboard_icons',
				),
			),
			'required' => array( 'maybeIcons', '!=', 'disable' ),
		);

		$this->controls['iconAnimation'] = array(
			'tab'         => 'content',
			'group'       => 'icons',
			'inline'      => true,
			'type'        => 'select',
			'label'       => esc_html__( 'Animation', 'bricks' ),
			'placeholder' => esc_html__( 'Fade', 'bricks' ),
			'options'     => array(
				'fade'       => esc_html__( 'Fade', 'bricks' ),
				'slideUp'    => esc_html__( 'Slide up', 'bricksextras' ),
				'slideDown'  => esc_html__( 'Slide down', 'bricksextras' ),
				'slideLeft'  => esc_html__( 'Slide left', 'bricksextras' ),
				'slideRight' => esc_html__( 'Slide right', 'bricksextras' ),
				'flipX'      => esc_html__( 'Flip', 'bricks' ) . ' (X)',
				'flipY'      => esc_html__( 'Flip', 'bricks' ) . ' (Y)',
			),
			'required'    => array( 'maybeIcons', '!=', 'disable' ),
		);

		$this->controls['animatedIconSep'] = array(
			'type'     => 'separator',
			'label'    => esc_html__( 'Animated checkmark', 'bricks' ),
			'group'    => 'icons',
			'required' => array(
				array( 'maybeIcons', '!=', 'disable' ),
				array( 'afterPressed', '!=', 'icon' ),
			),
		);

		$this->controls['animatedIconSize'] = array(
			'tab'         => 'content',
			'group'       => 'icons',
			'type'        => 'number',
			'units'       => true,
			'label'       => esc_html__( 'Icon size', 'bricks' ),
			'css'         => array(
				array(
					'property' => 'width',
					'selector' => '.x-copy-to-clipboard_animated-icon',
				),
			),
			'placeholder' => '1em',
			'required'    => array(
				array( 'maybeIcons', '!=', 'disable' ),
				array( 'afterPressed', '!=', 'icon' ),
			),
		);

		$this->controls['animatedIconStrokeWidth'] = array(
			'tab'      => 'content',
			'group'    => 'icons',
			'type'     => 'number',
			'units'    => false,
			'label'    => esc_html__( 'Width', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'stroke-width',
					'selector' => '.x-copy-to-clipboard_animated-icon',
				),
			),
			'required' => array(
				array( 'maybeIcons', '!=', 'disable' ),
				array( 'afterPressed', '!=', 'icon' ),
			),
		);

		/* tooltip */

		$this->controls['maybeToolip'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Enable', 'bricks' ),
			'type'        => 'select',
			'group'       => 'tooltip',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'inline'      => true,
			'clearable'   => false,
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);

		$this->controls['copyTooltipText'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Text', 'bricks' ),
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => 'Copy',
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['copiedTooltipText'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Text', 'bricks' ) . ' (' . esc_html__( 'Copied', 'bricks' ) . ')',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => 'Copied',
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['tooltipShow'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Trigger', 'bricks' ),
			'type'        => 'select',
			'group'       => 'tooltip',
			'options'     => array(
				'hocus'    => esc_html__( 'Hover', 'bricks' ) . ' / ' . esc_html__( 'Focus', 'bricks' ),
				'complete' => esc_html__( 'Copied', 'bricks' ),
			),
			'inline'      => true,
			'placeholder' => esc_html__( 'Hover', 'bricks' ) . ' / ' . esc_html__( 'Focus', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['placement'] = array(
			'tab'         => 'content',
			'label'       => esc_html__( 'Preferred placement', 'bricksextras' ),
			'type'        => 'select',
			'group'       => 'tooltip',
			'options'     => array(
				'top'          => esc_html__( 'Top', 'bricks' ),
				'right'        => esc_html__( 'Right', 'bricks' ),
				'bottom'       => esc_html__( 'Bottom', 'bricks' ),
				'left'         => esc_html__( 'Left', 'bricks' ),
				'auto'         => esc_html__( 'Auto', 'bricks' ) . ' (' . esc_html__( 'Where there is enough space', 'bricksextras' ) . ')',
				'auto-start'   => esc_html__( 'Auto Start', 'bricksextras' ),
				'auto-end'     => esc_html__( 'Auto End', 'bricksextras' ),
				'top-start'    => esc_html__( 'Top Start', 'bricksextras' ),
				'top-end'      => esc_html__( 'Top End', 'bricksextras' ),
				'right-start'  => esc_html__( 'Right Start', 'bricksextras' ),
				'right-end'    => esc_html__( 'Right End', 'bricksextras' ),
				'bottom-start' => esc_html__( 'Bottom Start', 'bricksextras' ),
				'bottom-end'   => esc_html__( 'Bottom End', 'bricksextras' ),
				'left-start'   => esc_html__( 'Left Start', 'bricksextras' ),
				'left-end'     => esc_html__( 'Left End', 'bricksextras' ),
			),
			'placeholder' => esc_html__( 'Top', 'bricks' ),
			'clearable'   => false,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['delay'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Delay', 'bricks' ) . ' (ms)',
			'type'        => 'number',
			'placeholder' => '0',
			'units'       => false,
			'small'       => true,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['offsetSkidding'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Offset', 'bricks' ) . ' (skidding)',
			'info'        => esc_html__( 'Distance along the side of the button', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => '0',
			'units'       => false,
			'small'       => true,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['offsetDistance'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Offset', 'bricks' ) . ' (distance)',
			'info'        => esc_html__( 'Distance away from the button', 'bricksextras' ),
			'type'        => 'number',
			'placeholder' => '10',
			'units'       => false,
			'small'       => true,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		/*  popover style */

		$this->controls['tooltipStyleSep'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'separator',
			'label'    => esc_html__( 'Styles', 'bricks' ),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$popover = '.tippy-content';

		$this->controls['popoverWidth'] = array(
			'tab'      => 'content',
			'label'    => esc_html__( 'Width', 'bricks' ),
			'inline'   => true,
			'group'    => 'tooltip',
			'type'     => 'number',
			'units'    => true,
			'css'      => array(
				array(
					'selector' => $popover,
					'property' => 'width',
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverTypography'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $popover,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'color',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'css'      => array(
				array(
					'property' => '--x-copytoclipboard-background',
					'selector' => '.x-copy-to-clipboard + [data-tippy-root]',
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverBorder'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'border',
			'rerender' => false,
			'label'    => esc_html__( 'Border', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $popover,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverBoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $popover,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$popover_copied = '[aria-pressed=true] + [data-tippy-root] .tippy-content';

		$this->controls['popoverCopiedSep'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'separator',
			'label'    => esc_html__( 'Copied', 'bricks' ),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverCopiedTypography'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'typography',
			'label'    => esc_html__( 'Typography', 'bricks' ),
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'font',
					'selector' => $popover_copied,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverCopiedBackgroundColor'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'color',
			'label'    => esc_html__( 'Background', 'bricks' ),
			'css'      => array(
				array(
					'property' => '--x-copytoclipboard-background',
					'selector' => '.x-copy-to-clipboard[aria-pressed=true] + [data-tippy-root]',
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverCopiedBorder'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'border',
			'rerender' => false,
			'label'    => esc_html__( 'Border', 'bricks' ),
			'css'      => array(
				array(
					'property' => 'border',
					'selector' => $popover_copied,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverCopiedBoxShadow'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'label'    => esc_html__( 'Box shadow', 'bricks' ),
			'type'     => 'box-shadow',
			'rerender' => false,
			'css'      => array(
				array(
					'property' => 'box-shadow',
					'selector' => $popover_copied,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popover_start'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'type'     => 'separator',
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverPadding'] = array(
			'tab'      => 'content',
			'group'    => 'tooltip',
			'label'    => esc_html__( 'Padding', 'bricks' ),
			'type'     => 'spacing',
			'css'      => array(
				array(
					'property' => 'padding',
					'selector' => $popover,
				),
			),
			'required' => array( 'maybeToolip', '=', 'enable' ),
		);

		/* animation */

		$this->controls['popoverTransitionIn'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Transition', 'bricks' ) . ' (' . esc_html__( 'Show', 'bricks' ) . ')',
			'css'         => array(
				array(
					'property' => '--x-copytoclipboard-transitionin',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '300',
			'inline'      => true,
			'unit'        => 'ms',
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverTransitionOut'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Transition', 'bricks' ) . ' (' . esc_html__( 'Hide', 'bricks' ) . ')',
			'css'         => array(
				array(
					'property' => '--x-copytoclipboard-transitionout',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '300',
			'unit'        => 'ms',
			'inline'      => true,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverTranslateX'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Translate X', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-copytoclipboard-translatex',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '0',
			'inline'      => true,
			'units'       => array(
				'px' => array(
					'min'  => 1,
					'max'  => 1000,
					'step' => 1,
				),
			),
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverTranslateY'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Translate Y', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-copytoclipboard-translatey',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '10',
			'inline'      => true,
			'units'       => array(
				'px' => array(
					'min'  => 1,
					'max'  => 1000,
					'step' => 1,
				),
			),
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		$this->controls['popoverScale'] = array(
			'tab'         => 'content',
			'group'       => 'tooltip',
			'label'       => esc_html__( 'Scale', 'bricks' ),
			'css'         => array(
				array(
					'property' => '--x-copytoclipboard-scale',
					'selector' => '',
				),
			),
			'type'        => 'number',
			'placeholder' => '0.95',
			'inline'      => true,
			'required'    => array( 'maybeToolip', '=', 'enable' ),
		);

		/* button */

		$button = '.x-copy-to-clipboard';

		$this->controls['copyButtonText'] = array(
			'tab'     => 'content',
			'group'   => 'button',
			'label'   => esc_html__( 'Button text', 'bricks' ),
			'type'    => 'text',
			'inline'  => true,
			'default' => esc_html__( 'Copy', 'bricksextras' ),
		);

		$this->controls['copiedButtonText'] = array(
			'tab'    => 'content',
			'group'  => 'button',
			'label'  => esc_html__( 'Button text', 'bricks' ) . ' (' . esc_html__( 'Copied', 'bricks' ) . ')',
			'type'   => 'text',
			'inline' => true,
		);

		$this->controls['ariaLabel'] = array(
			'tab'         => 'content',
			'group'       => 'button',
			'label'       => 'aria-label',
			'type'        => 'text',
			'inline'      => true,
			'placeholder' => '',
		);

		$this->controls['buttonWidth'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'label' => esc_html__( 'Button width', 'bricks' ),
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'width',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonTypography'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonBorder'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonBoxShadow'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => $button,
				),
			),
		);

		/* copied styles */

		$this->controls['buttonCopiedSep'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'separator',
			'label' => esc_html__( 'Button', 'bricks' ) . ' (' . esc_html__( 'Copied', 'bricks' ) . ')',
		);

		$button_copied = '.x-copy-to-clipboard[aria-pressed=true]';

		$this->controls['buttonCopiedTypography'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'typography',
			'label' => esc_html__( 'Typography', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'font',
					'selector' => $button_copied,
				),
			),
		);

		$this->controls['buttonCopiedBackgroundColor'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'color',
			'label' => esc_html__( 'Background', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'background-color',
					'selector' => $button_copied,
				),
			),
		);

		$this->controls['buttonCopiedBorder'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'border',
			'label' => esc_html__( 'Border', 'bricks' ),
			'css'   => array(
				array(
					'property' => 'border',
					'selector' => $button_copied,
				),
			),
		);

		$this->controls['buttonCopiedBoxShadow'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'label' => esc_html__( 'Box shadow', 'bricks' ),
			'type'  => 'box-shadow',
			'css'   => array(
				array(
					'property' => 'box-shadow',
					'selector' => $button_copied,
				),
			),
		);

		$this->controls['buttonTransition'] = array(
			'tab'            => 'content',
			'group'          => 'button',
			'label'          => esc_html__( 'Duration', 'bricks' ),
			'type'           => 'text',
			'css'            => array(
				array(
					'property' => '--x-copytoclipboard-duation',
					'selector' => $button,
				),
			),
			'inline'         => true,
			'hasDynamicData' => false,
			'placeholder'    => '300ms',
		);

		$this->controls['buttonPaddingSep'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'separator',
		);

		$this->controls['buttonPadding'] = array(
			'tab'         => 'content',
			'group'       => 'button',
			'label'       => esc_html__( 'Padding', 'bricks' ),
			'type'        => 'spacing',
			'placeholder' => array(
				'top'    => '20px',
				'right'  => '20px',
				'bottom' => '20px',
				'left'   => '20px',
			),
			'css'         => array(
				array(
					'property' => 'padding',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonFlexSep'] = array(
			'tab'   => 'content',
			'group' => 'button',
			'type'  => 'separator',
		);

		$this->controls['buttonDirection'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Direction', 'bricks' ),
			'group'   => 'button',
			'tooltip' => array(
				'content'  => 'flex-direction',
				'position' => 'top-left',
			),
			'type'    => 'direction',
			'css'     => array(
				array(
					'property' => 'flex-direction',
					'selector' => $button,
				),
			),
			'inline'  => true,
		);

		$this->controls['buttonJustifyContent'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align main axis', 'bricks' ),
			'group'   => 'button',
			'tooltip' => array(
				'content'  => 'justify-content',
				'position' => 'top-left',
			),
			'type'    => 'justify-content',
			'css'     => array(
				array(
					'property' => 'justify-content',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonAlignItems'] = array(
			'tab'     => 'content',
			'label'   => esc_html__( 'Align cross axis', 'bricks' ),
			'group'   => 'button',
			'tooltip' => array(
				'content'  => 'align-items',
				'position' => 'top-left',
			),
			'type'    => 'align-items',
			'css'     => array(
				array(
					'property' => 'align-items',
					'selector' => $button,
				),
			),
		);

		$this->controls['_columnGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Column gap', 'bricks' ),
			'group' => 'button',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'column-gap',
					'selector' => $button,
				),
			),
		);

		$this->controls['buttonRowGap'] = array(
			'tab'   => 'content',
			'label' => esc_html__( 'Row gap', 'bricks' ),
			'group' => 'button',
			'type'  => 'number',
			'units' => true,
			'css'   => array(
				array(
					'property' => 'row-gap',
					'selector' => $button,
				),
			),
		);

		/* behaviour */

		$this->controls['hideEmpty'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'label'       => esc_html__( 'Hide if nothing to copy', 'bricksextras' ),
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);

		$this->controls['buttonDelay'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'type'        => 'number',
			'label'       => esc_html__( 'Delay', 'bricks' ) . ' (' . esc_html__( 'State', 'bricks' ) . ')',
			'info'        => esc_html__( 'How long to stay in copied state', 'bricksextras' ),
			'placeholder' => '3000',
		);

		$this->controls['selectText'] = array(
			'tab'         => 'content',
			'group'       => 'behaviour',
			'inline'      => true,
			'type'        => 'select',
			'options'     => array(
				'enable'  => esc_html__( 'Enable', 'bricks' ),
				'disable' => esc_html__( 'Disable', 'bricks' ),
			),
			'label'       => esc_html__( 'Select copied text', 'bricksextras' ),
			'placeholder' => esc_html__( 'Disable', 'bricks' ),
		);
	}

	/**
	 * Enqueue scripts.
	 */
	public function enqueue_scripts() {

		if ( bricks_is_builder_main() ) {
			return;
		}

		wp_enqueue_script( 'x-copy-to-clipboard', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'copytoclipboard' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );

		if ( BricksExtras\Helpers::maybe_preview() ) {

			wp_enqueue_script( 'x-popper', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'popper' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
			wp_enqueue_script( 'x-copy-to-clipboard-popover', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'copytoclipboardpopover' ) . '.js', array( 'x-popper' ), \BricksExtras\Plugin::VERSION, true );

			wp_localize_script(
				'x-copy-to-clipboard-popover',
				'xTippy',
				array(
					'Instances' => array(),
				)
			);

		}

		if ( ! \BricksExtras\Helpers::element_css_added( $this->name ) ) {
			wp_enqueue_style( 'x--copy-to-clipboard', BRICKSEXTRAS_URL . 'components/assets/css/copytoclipboard.css', array(), \BricksExtras\Plugin::VERSION );
		}
	}

	/**
	 * Render element output.
	 */
	public function render() {

		$tag      = 'button';
		$settings = $this->settings;

		$maybe_icons   = isset( $settings['maybeIcons'] ) ? 'enable' === $settings['maybeIcons'] : true;
		$copy_icon     = empty( $this->settings['copyIcon'] ) ? false : self::render_icon( $this->settings['copyIcon'] );
		$copied_icon   = empty( $this->settings['copiedIcon'] ) ? false : self::render_icon( $this->settings['copiedIcon'] );
		$after_pressed = isset( $settings['afterPressed'] ) ? esc_attr( $settings['afterPressed'] ) : 'check';
		$aria_label    = isset( $settings['ariaLabel'] ) ? esc_attr( bricks_render_dynamic_data( $settings['ariaLabel'] ) ) : false;

		$maybe_tooltip = isset( $settings['maybeToolip'] ) ? 'enable' === $settings['maybeToolip'] : false;
		$select_text   = isset( $settings['selectText'] ) ? 'enable' === $settings['selectText'] : false;

		$hide_empty = isset( $settings['hideEmpty'] ) ? 'enable' === $settings['hideEmpty'] : false;

		$copy_selector = isset( $settings['copySelector'] ) ? bricks_render_dynamic_data( $settings['copySelector'] ) : '';

		$output_icon = 'check' === $after_pressed ? "<svg width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' class='x-copy-to-clipboard_animated-icon'><path d='M13.25 4.75L6 12L2.75 8.75'></path></svg>" : $copied_icon;

		$copy_from = isset( $settings['copyFrom'] ) ? esc_attr( $settings['copyFrom'] ) : 'selector';

		$icon_animation = isset( $settings['iconAnimation'] ) ? esc_attr( $settings['iconAnimation'] ) : 'fade';

		$copytext_setting = isset( $settings['copytext'] ) ? esc_html( $settings['copytext'] ) : '';

		$tooltip_show = isset( $settings['tooltipShow'] ) ? esc_attr( $settings['tooltipShow'] ) : 'hocus';

		if ( 'hocus' === $tooltip_show ) {
			$tooltip_reveal = 'mouseenter click focus';
		} else {
			$tooltip_reveal = 'manual';
		}

		$config = array(
			'componentScope'  => isset( $this->settings['componentScope'] ) ? $this->settings['componentScope'] : 'false',
			'parentComponent' => \BricksExtras\Helpers::get_parent_component_id( $this->element ),
		);

		$copy_text  = bricks_render_dynamic_data( $copytext_setting );
		$strip_tags = isset( $settings['stripTags'] ) ? 'enable' === $settings['stripTags'] : true;

		$copy_text_stripped = wp_strip_all_tags( $copy_text );

		if ( 'dynamic_data' === $copy_from ) {
			if ( $strip_tags ) {
				$this->set_attribute( '_root', 'data-x-copy-text', esc_attr( $copy_text_stripped ) );
			} else {
				$this->set_attribute( '_root', 'data-x-copy-text', esc_attr( bricks_render_dynamic_data( $settings['copytext'] ) ) );
			}
		} else {
					$config += array( 'copySelector' => $copy_selector );
					$config += array( 'selectText' => $select_text );
		}

		$copy_tooltip_text   = isset( $settings['copyTooltipText'] ) ? bricks_render_dynamic_data( $settings['copyTooltipText'] ) : 'Copy';
		$copied_tooltip_text = isset( $settings['copiedTooltipText'] ) ? bricks_render_dynamic_data( $settings['copiedTooltipText'] ) : 'Copied';

		if ( $maybe_tooltip ) {
			$config += array(
				'placement'      => isset( $this->settings['placement'] ) ? $this->settings['placement'] : 'top',
				'offsetSkidding' => isset( $this->settings['offsetSkidding'] ) ? intval( $this->settings['offsetSkidding'] ) : 0,
				'offsetDistance' => isset( $this->settings['offsetDistance'] ) ? intval( $this->settings['offsetDistance'] ) : 10,
				'delay'          => isset( $this->settings['delay'] ) ? intval( $this->settings['delay'] ) : 0,
				'followCursor'   => isset( $this->settings['followCursor'] ) ? $this->settings['followCursor'] : 'false',
				'copyText'       => wp_kses_post( $copy_tooltip_text ),
				'copiedText'     => wp_kses_post( $copied_tooltip_text ),
				'tooltipReveal'  => $tooltip_reveal,
			);
		}

		$copied_button_text = isset( $settings['copiedButtonText'] ) ? wp_kses_post( bricks_render_dynamic_data( $settings['copiedButtonText'] ) ) : false;

		if ( $copied_button_text ) {
			$config += array( 'copiedButtonText' => $copied_button_text );
		}

		if ( isset( $settings['buttonDelay'] ) ) {
			$config += array(
				'buttonDelay' => intval( $this->settings['buttonDelay'] ),
			);
		}

		if ( $hide_empty ) {
			$config += array( 'hideEmpty' => 'true' );
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element ) ) {
			$config += array( 'isLooping' => \BricksExtras\Helpers::get_parent_loop_id( $this->element ) );
		}

		if ( \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) ) {
			$config += array( 'isLoopingComponent' => \BricksExtras\Helpers::get_parent_loop_id( $this->element, true ) );
		}

		$this->set_attribute( '_root', 'data-x-copy-to-clipboard', wp_json_encode( $config ) );

		if ( $maybe_tooltip ) {
			$this->set_attribute( '_root', 'data-x-tooltip', 'true' );
		}

		$copy_button_text = isset( $settings['copyButtonText'] ) ? $settings['copyButtonText'] : false;

		$this->set_attribute( 'x-copy-to-clipboard', 'class', 'x-copy-to-clipboard' );
		if ( (bool) $aria_label && ! $copy_button_text ) {
			$this->set_attribute( 'x-copy-to-clipboard', 'aria-label', $aria_label );
		}

		// Generate and set a unique identifier for this instance.
		$indentifier = \BricksExtras\Helpers::set_identifier_attribute( $this );

		$this->set_attribute( 'x-copy-tooltip-content', 'id', 'x-copy-tooltip-content_' . $indentifier );

		$this->set_attribute( 'x-copy-to-clipboard', 'aria-pressed', 'false' );

		$this->set_attribute( 'x_copy-icon', 'class', 'x_copy-icon' );
		$this->set_attribute( 'x_copy-icon', 'class', 'x-copy-to-clipboard_icon' );
		$this->set_attribute( 'x_copy-icon', 'aria-hidden', 'true' );
		$this->set_attribute( 'x_copied-icon', 'class', 'x_copied-icon' );
		$this->set_attribute( 'x_copied-icon', 'class', 'x-copy-to-clipboard_icon' );
		$this->set_attribute( 'x_copied-icon', 'aria-hidden', 'true' );

		$this->set_attribute( 'x-copy-to-clipboard_icons', 'class', 'x-copy-to-clipboard_icons' );

		$this->set_attribute( 'x-copy-tooltip-content', 'class', array( 'x-copy-tooltip-content' ) );
		$this->set_attribute( 'x-copy-tooltip-content', 'role', array( 'tooltip' ) );

		$this->set_attribute( 'tippy-content', 'class', array( 'tippy-content' ) );
		$this->set_attribute( 'tippy-content', 'data-state', array( 'visible' ) );

		$this->set_attribute( 'tippy-root', 'data-tippy-root', '' );

		$this->set_attribute( 'tippy-box', 'class', 'tippy-box' );
		$this->set_attribute( 'tippy-box', 'data-state', 'visible' );
		$this->set_attribute( 'tippy-box', 'tabindex', '1' );
		$this->set_attribute( 'tippy-box', 'data-theme', 'extras' );
		$this->set_attribute( 'tippy-box', 'data-animation', 'extras' );

		$this->set_attribute( 'x-copy-to-clipboard', 'data-x-animation', $icon_animation );

		$this->set_attribute( 'x-copy-to-clipboard_text', 'class', 'x-copy-to-clipboard_text' );

		$output = '';

		$output .= "<div {$this->render_attributes( '_root' )}>";

		$output .= "<button {$this->render_attributes( 'x-copy-to-clipboard' )}>";

		if ( $copy_button_text ) {
			$output .= "<span {$this->render_attributes( 'x-copy-to-clipboard_text' )}>" . wp_kses_post( $copy_button_text ) . '</span>';
		}

		$output .= \Bricks\Frontend::render_children( $this );

		if ( $maybe_icons ) {
			$output .= "<span {$this->render_attributes( 'x-copy-to-clipboard_icons' )}>";
			$output .= "<span {$this->render_attributes( 'x_copied-icon' )}> " . $output_icon . ' </span>';
			$output .= "<span {$this->render_attributes( 'x_copy-icon' )}> " . $copy_icon . '  </span>';
			$output .= '</span>';
		}

		$output .= '</button>';

		if ( BricksExtras\Helpers::maybe_preview() ) {
			$output .= "<div {$this->render_attributes( 'x-copy-tooltip-content' )}>";
			$output .= "<div {$this->render_attributes( 'tippy-root' )}>";
			$output .= "<div {$this->render_attributes( 'tippy-box' )}>";
			$output .= "<div {$this->render_attributes( 'tippy-content' )}>";
			$output .= "<div {$this->render_attributes( 'x-copy-tooltip-content-inner' )}>" . esc_html( $copy_tooltip_text ) . '</div>';
			$output .= '</div>';
			$output .= '</div>';
			$output .= '</div>';
			$output .= '</div>';
		}

		$output .= '</div>';

		echo $output;

		if ( ! bricks_is_builder_main() && $maybe_tooltip && ! BricksExtras\Helpers::maybe_preview() ) {

			wp_enqueue_script( 'x-popper', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'popper' ) . '.js', array( 'bricks-scripts' ), \BricksExtras\Plugin::VERSION, true );
			wp_enqueue_script( 'x-copy-to-clipboard-popover', BRICKSEXTRAS_URL . 'components/assets/js/' . \BricksExtras\Helpers::maybe_minify_scripts( 'copytoclipboardpopover' ) . '.js', array( 'x-popper' ), \BricksExtras\Plugin::VERSION, true );

			if ( ! self::$script_localized ) {

				wp_localize_script(
					'x-copy-to-clipboard-popover',
					'xTippy',
					array(
						'Instances' => array(),
					)
				);

				self::$script_localized = true;

			}
		}
	}
}
