---
// Properties
const {Query, QueryText} = Astro.props

// Components
import SearchBox from "./SearchBox.astro";

// Icons
import { HalfMoon, Menu, SunLight } from "@iconoir/vue";
---

<header>
    <div class="header-start">
        <a href="/"><img width="18px" src="https://md.sudovanilla.org/images/Union.png"/></a>
        <SearchBox/>
    </div>
    <div class="header-end">
        <button>English</button>
        <button onclick="ThemeToggle()" title="Toggle Theme" class="button-icon">
            <SunLight class:list={'theme-light'}/>
            <HalfMoon class:list={'theme-dark'}/>
        </button>
        <button title="Options" class="button-icon" data-tooltip-placement="right"><Menu /></button>
    </div>
</header>


<script is:inline>
function ThemeToggle() {
    if (document.body.getAttribute('class') === 'dark') {
        document.body.setAttribute('class', 'light')
        document.cookie = "Theme=Light"; 
    } else if (document.body.getAttribute('class') === 'light') {
        document.body.setAttribute('class', 'dark')
        document.cookie = "Theme=Dark"; 
    }
}
</script>

<style lang="scss">
header {
    padding: 16px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-start,
    .header-end {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 6px;
    }
    .header-end {
        button {
            min-height: 32px;
            border-radius: 3rem;
            border: 1px white solid;
            padding: 0px 12px;
            background: var(--box-background);
            border: 1px rgb(192, 192, 192) solid;
            cursor: pointer;
            color: var(--text);
        }
        .button-icon {
            aspect-ratio: 1;
            padding: 0px 6px;
            svg {
                width: 16px;
                transform: translate(0px, 2px);
            }
        }
    }
}
</style>

<!-- Search Scripts -->
<!-- From https://ark.sudovanilla.org/MinPluto/MinPluto/src/branch/master/source/src/components/Search.astro#L18-L94 as of writing -->
<script>
/*
@licstart  The following is the entire license notice for the 
JavaScript code in this page.

Copyright (C) 2024 SudoVanilla

The JavaScript code in this page is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version.  The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.

As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.   


@licend  The above is the entire license notice
for the JavaScript code in this page.
*/

// Focus input
function FocusSearch() {
    document.querySelector('input[type="search"]').focus();
}

// The "Search()" function does not work for Zarro, an API request
// will be made to an endpoint instead with a redirect parameter.
// Learn More: https://docs.astro.build/en/guides/endpoints/#redirects

// Trigger Search
// function Search() {
//     var SearchQuery = document.querySelector('form > input[type="search"]').value;
//     location.href = `/web?=${SearchQuery}`;
// }
</script>