import { __ } from "@wordpress/i18n";
import { addAction } from "@wordpress/hooks";
import {
    BaseControl,
    CheckboxControl,
    SelectControl,
} from "@wordpress/components";

function normalizeBool( raw, fallback = true ) {
    if ( raw === true || raw === "true" || raw === 1 || raw === "1" ) return true;
    if ( raw === false || raw === "false" || raw === 0 || raw === "0" ) return false;
    return fallback;
}

/**
 * Registers built-in conditions through the shared action.
 */
export function registerBuiltInVisibilityConditions() {
    addAction(
        "jetMenu.registerConditions",
        "jet-menu/dynamic-visibility/built-in",
        ( registry ) => {

            // Logged In
            registry.register( {
                name: "logged_in",
                label: __( "Logged In", "jet-menu" ),
                defaultAttrs: { value: true },
                renderUI: ( { attrs, onChange } ) => {
                    const currentValue = normalizeBool( attrs?.value, true ) ? "1" : "0";

                    return (
                        <div className="jet-menu-dv__row">
                            <SelectControl
                                label={ __( "Value", "jet-menu" ) }
                                value={ currentValue }
                                options={ [
                                    { label: __( "Yes", "jet-menu" ), value: "1" },
                                    { label: __( "No", "jet-menu" ), value: "0" },
                                ] }
                                onChange={ ( v ) => onChange( { value: v === "1" } ) }
                            />
                        </div>
                    );
                },
            } );

            // User Role
            registry.register( {
                name: "user_role",
                label: __( "User Role", "jet-menu" ),
                defaultAttrs: { operator: "in", roles: [] },
                renderUI: ( { attrs, onChange, rolesOptions } ) => {
                    const operator = attrs?.operator || "in";
                    const selectedRoles = Array.isArray( attrs?.roles ) ? attrs.roles : [];
                    const roles = Array.isArray( rolesOptions ) ? rolesOptions : [];

                    return (
                        <>
                            <div className="jet-menu-dv__row">
                                <SelectControl
                                    label={ __( "Operator", "jet-menu" ) }
                                    value={ operator }
                                    options={ [
                                        { label: __( "In", "jet-menu" ), value: "in" },
                                        { label: __( "Not in", "jet-menu" ), value: "not_in" },
                                    ] }
                                    onChange={ ( op ) => onChange( { operator: op } ) }
                                />
                            </div>

                            <BaseControl label={ __( "Roles", "jet-menu" ) }>
                                <div className="jet-menu-dv-roles">
                                    { roles.map( ( role ) => {
                                        const roleValue = role && role.value ? String( role.value ) : "";
                                        if ( ! roleValue ) return null;

                                        const isChecked = selectedRoles.indexOf( roleValue ) !== -1;

                                        return (
                                            <CheckboxControl
                                                key={ "dv-role-" + roleValue }
                                                label={ role.label || roleValue }
                                                checked={ isChecked }
                                                onChange={ ( checked ) => {
                                                    const nextRoles = selectedRoles.slice();

                                                    if ( checked ) {
                                                        if ( nextRoles.indexOf( roleValue ) === -1 ) {
                                                            nextRoles.push( roleValue );
                                                        }
                                                    } else {
                                                        const pos = nextRoles.indexOf( roleValue );
                                                        if ( pos !== -1 ) {
                                                            nextRoles.splice( pos, 1 );
                                                        }
                                                    }

                                                    onChange( { roles: nextRoles } );
                                                } }
                                            />
                                        );
                                    } ) }
                                </div>
                            </BaseControl>
                        </>
                    );
                },
            } );

            // Simple (no attrs UI)
            const simple = [
                [ "is_front_page", __( "Is Front Page", "jet-menu" ) ],
                [ "is_home", __( "Is Home (Posts page)", "jet-menu" ) ],
                [ "is_singular", __( "Is Singular", "jet-menu" ) ],
                [ "is_page", __( "Is Page", "jet-menu" ) ],
                [ "is_archive", __( "Is Archive", "jet-menu" ) ],
                [ "is_search", __( "Is Search Results", "jet-menu" ) ],
                [ "is_404", __( "Is 404", "jet-menu" ) ],

                [ "wc_is_cart", __( "Woo: Is Cart", "jet-menu" ) ],
                [ "wc_is_checkout", __( "Woo: Is Checkout", "jet-menu" ) ],
                [ "wc_is_account", __( "Woo: Is Account Page", "jet-menu" ) ],
                [ "wc_is_shop", __( "Woo: Is Shop", "jet-menu" ) ],
                [ "wc_is_product", __( "Woo: Is Product", "jet-menu" ) ],
                [ "wc_is_product_category", __( "Woo: Is Product Category", "jet-menu" ) ],
                [ "wc_is_product_tag", __( "Woo: Is Product Tag", "jet-menu" ) ],
            ];

            simple.forEach( ( [ name, label ] ) => {
                registry.register( {
                    name,
                    label,
                    defaultAttrs: {},
                    renderUI: null,
                } );
            } );
        }
    );
}