<?php
/**
 * WeCodeArt Framework
 *
 * WARNING: This file is part of the core WeCodeArt Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package 	WeCodeArt Framework 
 * @subpackage 	Markup\Inputs
 * @copyright   Copyright (c) 2025, WeCodeArt Framework
 * @since		5.0.0
 * @version		6.4.5
 */

namespace WeCodeArt\Support\DOM\Inputs;

defined( 'ABSPATH' ) || exit;

use WeCodeArt\Support\DOM\Inputs\Base;
use function WeCodeArt\Functions\get_prop;

/**
 * Standard Inputs Markup
 */
class Toggle extends Base {

    /**
     * Input's Vars.
     *
     * @since   5.0.0
     * @var     string
     */
    public $_label          = 'none';
    public $with_messages   = false;

    /**
	 * Constructor 
	 */
    public function __construct( string $type = 'toggle', array $args = [] ) {
        $type               = get_prop( $args, 'type' );
        $this->unique_id    = wp_unique_id( 'toggle-' );
        $this->type         = in_array( $type, [ 'radio', 'checkbox' ] ) ? $type : 'radio';
        $this->label        = get_prop( $args, 'label', '' );
        $this->attrs        = get_prop( $args, 'attrs', [] );
        $this->messages     = get_prop( $args, 'messages', [] );
    }

	/**
	 * Create HTML Inputs
	 *
	 * @since	unknown
	 * @version	6.4.1
     *
     * @return  void
	 */
	public function content() {
        wecodeart( 'dom' )::wrap( $this->type, [
            [
                'tag'   => 'span',
                'attrs' => [
                    'class' => $this->input_class(),
                ]
            ]
        ], 'wecodeart_input', [ $this->type, [
            '_label'    => 'after',
            'label'     => $this->label,
            'attrs'     => wp_parse_args( [
                'class' => 'form-check-input',
                'id'    => get_prop( $this->attrs, [ 'id' ], $this->unique_id )
            ], $this->attrs ),
            'messages'  => $this->messages
        ] ] ); 
    }

    /**
	 * Input class
	 *
	 * @since	6.4.1
     *
     * @return  string
	 */
	public function input_class(): string {
        $classes = explode( ' ', get_prop( $this->attrs, [ 'class' ], '' ) );
        
        if( ! array_intersect_key( [ 'form-check', 'form-switch' ], array_flip( $classes ) ) ) $classes[] = 'form-check';

        return implode( ' ', $classes );
    }

    /**
	 * Input styles.
	 *
	 * @return 	string
	 */
	public static function styles(): string {
		return '
            /* Check */
            .form-check {
                --wp--input--size: 1em;
                --wp--input--icon-check: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27m6 10 3 3 6-6%27/%3e%3c/svg%3e");
				--wp--input--icon-radio: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%272%27 fill=%27%23fff%27/%3e%3c/svg%3e");
                display: block;
                min-height: 1.5rem;
                padding-left: calc(var(--wp--input--size) + .5em);
                margin-bottom: 0.125rem;
            }
            .form-check .form-check-input {
                float: left;
                margin-left: calc(-1 * var(--wp--input--size) - .5em);
            }
            .form-check-reverse {
                padding-right: calc(var(--wp--input--size) + .5em));
                padding-left: 0;
                text-align: right;
            }
            .form-check-reverse .form-check-input {
                float: right;
                margin-right: calc(-1 * var(--wp--input--size) - .5em);
                margin-left: 0;
            }
            .form-check-input {
                width: var(--wp--input--size);
                height: var(--wp--input--size);
                margin-top: 0.25em;
                vertical-align: top;
                background-color: var(--wp--input--background-color);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
                border: var(--wp--input--border);
                -webkit-appearance: none;
                        appearance: none;
                -webkit-print-color-adjust: exact;
                        print-color-adjust: exact;
            }
            .form-check-input[type=checkbox] {
                border-radius: 0.25em;
            }
            .form-check-input[type=radio] {
                border-radius: 50%;
            }
            .form-check-input:active {
                filter: brightness(90%);
            }
            .form-check-input:focus {
                border-color: var(--wp--input--border-color-focus);
                box-shadow: 0 0 0 0.25rem var(--wp--preset--color--accent);
                outline: 0;
            }
            .form-check-input:checked {
                background-color: var(--wp--preset--color--primary);
                border-color: var(--wp--preset--color--primary);
            }
            .form-check-input:checked[type=checkbox] {
                background-image: var(--wp--input--icon-check);
            }
            .form-check-input:checked[type=radio] {
                background-image: var(--wp--input--icon-radio);
            }
            .form-check-input[type=checkbox]:indeterminate {
                background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10h8%27/%3e%3c/svg%3e");
                background-color: var(--wp--preset--color--primary);
                border-color: var(--wp--preset--color--primary);
            }
            .form-check-input:disabled {
                pointer-events: none;
                filter: none;
                opacity: .5;
            }
            .form-check-input:is([disabled],:disabled) ~ .form-check-label {
                color: var(--wp--input--disabled-color);
                cursor: default;
            }
            
            /* Switch */
            .form-switch {
                --wp--input--size: 2em;
                --wp--input--icon-switch: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27rgba%280, 0, 0, 0.25%29%27/%3e%3c/svg%3e");
                --wp--input--icon-switch--checked: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e");
                --wp--input--icon-switch--focus: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%2391c4f6%27/%3e%3c/svg%3e");
            }
            .form-switch .form-check-input {
                height: 1em;
                border-radius: 2em;
                background-image: var(--wp--input--icon-switch);
                background-position: left center;
                transition: background-position 0.15s ease-in-out;
            }
            .form-switch .form-check-input:focus {
                background-image: var(--wp--input--icon-switch--focus);
            }
            .form-switch .form-check-input:checked {
                background-image: var(--wp--input--icon-switch--checked);
                background-position: right center;
            }
            .form-switch.form-check-reverse {
                padding-right: var(--wp--input--size);
                padding-left: 0;
            }
            .form-switch.form-check-reverse .form-check-input {
                margin-left: 0;
            }  
            .form-check-inline {
                display: inline-block;
            }
            .form-check-inline + .form-check-inline {
                margin-left: 1rem;
            }

            /* Validation */
            .was-validated .form-check-input:valid,
            .form-check-input.is-valid {
                border-color: var(--wp--preset--color--success);
            }
            .was-validated .form-check-input:valid:checked,
            .form-check-input.is-valid:checked {
                background-color: var(--wp--preset--color--success);
            }
            .was-validated .form-check-input:valid:focus,
            .form-check-input.is-valid:focus {
                box-shadow: 0 0 0 0.25rem rgba(125, 200, 85, 0.25);
            }
            .was-validated .form-check-input:valid ~ .form-check-label,
            .form-check-input.is-valid ~ .form-check-label {
                color: var(--wp--preset--color--success);
            }
            .was-validated .form-check-input:invalid,
            .form-check-input.is-invalid {
                border-color: var(--wp--preset--color--danger);
            }
            .was-validated .form-check-input:invalid:checked,
            .form-check-input.is-invalid:checked {
                background-color: var(--wp--preset--color--danger);
            }
            .was-validated .form-check-input:invalid:focus,
            .form-check-input.is-invalid:focus {
                box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
            }
            .was-validated .form-check-input:invalid ~ .form-check-label,
            .form-check-input.is-invalid ~ .form-check-label {
                color: var(--wp--preset--color--danger);
            }
            .form-check-inline .form-check-input ~ :is(.valid-feedback,.invalid-feedback ) {
                margin-left: 0.5em;
            }
            
            /* Motion */
            @media (prefers-reduced-motion: reduce) {
                .form-switch .form-check-input {
                    transition: none;
                }
            }
        ';
	}
}