/*
Copyright (C) 2020-2023 Graz University of Technology.
Copyright (C) 2023-2026 Cian-H/iform-invenio (I-Form).

invenio-theme-iform is free software; you can redistribute it and/or
modify it under the terms of the MIT License; see LICENSE file for more
details.
*/

import $ from "jquery";
import "semantic-ui-css";
import { MultipleOptionsSearchBar } from "@js/invenio_search_ui/components";
import { i18next } from "@translations/invenio_app_rdm/i18next";
import ReactDOM from "react-dom";
import React from "react";

// called on document ready
$(function () {
    syncLogoHover();
});
// used for sticky test instance notification
$(".ui.sticky.test-instance").sticky({
    context: "body",
});

export function toggleVisibility(id) {
    var element = document.getElementById(id);
    var isHided = element.style.display === "none";

    element.style.display = isHided ? "block" : "none";
}

window.toggleVisibility = toggleVisibility;

const headerSearchbar = document.getElementById("header-search-bar");
const searchBarOptions = JSON.parse(headerSearchbar.dataset.options);

// Quick upload dropdown
$("#quick-upload-dropdown.ui.dropdown").dropdown({
    showOnFocus: false,
    selectOnKeydown: false,
    action: (text, value, element) => {
        // needed to trigger navigation on keyboard interaction
        let path = element.attr("href");
        window.location.pathname = path;
    },
    onShow: () => {
        $("#quick-upload-dropdown-btn").attr("aria-expanded", true);
    },
    onHide: () => {
        $("#quick-upload-dropdown-btn").attr("aria-expanded", false);
    },
});

// Synchronises the hover states of the subcomponents of the logo
export function syncLogoHover() {
    const logoGrad = document.getElementById("int-header-logo-grad");
    const logoText = document.getElementById("int-header-logo-text");

    const originalFillGrad = logoGrad.getAttribute("fill");
    const originalColorGrad = logoGrad.getAttribute("color");
    const originalFillText = logoText.getAttribute("fill");
    const originalColorText = logoText.getAttribute("color");

    logoGrad.addEventListener("mouseover", () => {
        logoText.setAttribute("fill", "@primaryLinkHoverBackground");
        logoText.setAttribute("color", "@primaryLinkHoverBackground");
    });
    logoGrad.addEventListener("mouseout", () => {
        logoText.setAttribute("fill", originalFillText);
        logoText.setAttribute("color", originalColorText);
    });

    logoText.addEventListener("mouseover", () => {
        logoGrad.setAttribute("fill", "@primaryLinkHoverBackground");
        logoGrad.setAttribute("color", "@primaryLinkHoverBackground");
    });
    logoText.addEventListener("mouseout", () => {
        logoGrad.setAttribute("fill", originalFillGrad);
        logoGrad.setAttribute("color", originalColorGrad);
    });
}

window.syncLogoHover = syncLogoHover;

const HeaderSearchBar = () => {
    return (
        <MultipleOptionsSearchBar
            options={searchBarOptions}
            placeholder={i18next.t("Search records...")}
        />
    );
};

ReactDOM.render(
    <HeaderSearchBar />,
    headerSearchbar,
);
