@use '../layers';
@use '../mixins' as *;
@use '../overlay' as *;

/*
    The entire search interface (except .close-search) is generated by Pagefind UI inside <search>.
    Technically, it uses its own container .pagefind-ui__form, but we ignore it for the sake of simplicity.

    As far as this file is concerned, there are three screen sizes,
    and this distinction slightly differs from the distinction used in other places.

    A. The search field is constantly visible, the search result appear in a dropdown.

    B. The search field is collapsed into an icon until activated, but then behaves identically to the mode A.
       We switch to this mode to use the horizontal space more effective
       This mode is used based on the global `for-tablet` mixin

    C. The search field is collapsed into an icon until activated, and then takes the full available width.
       The popup, when appears, takes the full available height, creating an illusion of a fullscreen interface.
       This mode is only used on the smallest devices, because it would look weird on a wide screen.
       Therefore, the threshold for switching to it is independent from the one in the global `for-phone` mixin.
 */


@if is-browser() {

    // The screen size at which we switch between modes B and C
    $search-mobile-width: 40rem;


    // Common styles for modes A, B, C
    search {
        // The search interface must be the only thing not covered by the .close-search layer
        z-index: layers.$search;

        // Make this element the root for the absolute-positioned children
        position: relative;

        .pagefind-ui__search-input {
            &::placeholder {
                color: var(--highlight-accent-color);
            }
        }

        .pagefind-ui__drawer {
            overflow-y: auto;
            scroll-behavior: auto;

            padding: var(--cell-padding);

            &:not(:has(*)) {
                display: none;
            }

            // Follow the Pagefind UI default logic for when to show the drawer
            &.pagefind-ui__hidden {
                display: none;
            }

            // Pagefind UI provides various messages in different situations
            // When it is followed by a non-empty list of results, it likely says how many results there are
            // Since I don't see this particular message very useful, I just hide it
            .pagefind-ui__message:has(~ .pagefind-ui__results:not(:empty)) {
                display: none;
            }

            .pagefind-ui__results {
                list-style: none;
                padding-left: 0;
                margin: 0;

                li {
                    margin-bottom: .8rem;

                    .pagefind-ui__result-title {
                        margin: 0 0 .2em 0;

                        a {
                            font-weight: bold;
                            display: block;
                            width: 100%;
                        }
                    }

                    .pagefind-ui__result-excerpt {
                        margin: 0;
                        font-size: .9em;
                    }
                }
            }

            // The 'Load more results' button at the bottom should look like a link
            .pagefind-ui__button {
                @include reset-input;

                display: inline;
                cursor: pointer;
                text-decoration: underline;

                padding: 0;
                font-size: 1rem;
                color: var(--link-color);
            }
        }

        & + .close-search {
            @include overlay-hidden;
            z-index: layers.$under-search;
        }
    }


    // Text field, button and drawer for modes A, B
    @media (width > $search-mobile-width) {
        search {
            // Don't take more space than we need
            flex: 0 0 min-content;

            // Make sure to add a bigger margin between the last icon and the search
            margin-left: .5rem;

            // The text field takes the whole element's area
            .pagefind-ui__search-input {
                height: var(--header-button-size);
                width: var(--search-field-width);
                box-sizing: border-box;

                background: var(--highlight-color);
                color: var(--text-color);
                border-radius: var(--border-radius-big);
                border: 1px solid var(--background-color);

                // Disable the browser's default styling for the input
                outline: none;

                // The padding is the same as for table cells
                // We use '!important' to override Pagefind UI's seemingly hardcoded padding-right in runtime
                padding: var(--cell-padding-vertical) !important;
                padding-right: var(--header-button-size) !important;

                &:focus {
                    background: var(--background-color);
                    border-color: var(--highlight-accent-color);
                }

                &:has(~ .pagefind-ui__drawer:not(.pagefind-ui__hidden)) {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    border-bottom: none;
                }
            }

            // The Clear button appears in front of the text field (visually inside it)
            .pagefind-ui__search-clear {
                @include reset-input;
                cursor: pointer;

                // The clickable area is a square that takes all the height of the text field
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                width: var(--header-button-size);

                // Make the button transparent
                background: none;
                border: none;
                box-sizing: border-box;

                // The caption must not be visible
                font-size: 0;

                &::before {
                    content: '×';
                    color: var(--highlight-accent-color);
                    font-size: var(--search-clear-circle);

                    // Make this element a circle, even though its shape won't be visible when not hovered
                    display: block;
                    margin-left: calc((var(--header-button-size) - var(--search-clear-circle)) / 2);
                    width: var(--search-clear-circle);
                    line-height: var(--search-clear-circle);
                    border-radius: 50%;
                }

                &:hover::before,
                &:focus::before {
                    // When hovered, make the circle visible and invert the icon color
                    background: var(--highlight-accent-color);
                    color: var(--background-color);
                }

                // Follow the Pagefind UI default logic for when to show the button
                &.pagefind-ui__suppressed {
                    display: none;
                }
            }

            .pagefind-ui__drawer {
                // The drawer appears next to the search form, above all other content
                position: absolute;
                top: 100%;
                right: 0;
                z-index: layers.$search;

                background: var(--background-color);
                box-sizing: border-box;
                width: clamp(var(--search-field-width), 50rem, 90vw);
                max-height: 40 var(--search-drawer-height);
                box-shadow: 0 2px .2rem 0 var(--shadow-color);
                border: 1px solid var(--highlight-accent-color);
                border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
            }
        }

        // The whole area outside the search UI becomes an invisible button for closing the UI
        search:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden)) + .close-search {
            @include overlay-transparent;
        }
    }


    // Input collapsed into an icon for modes B, C
    @include for-tablet-or-phone {

        // Prepare to animate the transition between the icon state and the normal field state
        .pagefind-ui__search-input {
            transition: width .2s;
        }

        // The whole <search> element looks like an icon until activated.
        // When the user presses Ctrl+K, the input gets :focus, thus exiting this state.
        // Alternatively, the user just clicks on the icon,
        // which actually means clicking on the transparent input covering the icon,
        // thus again giving the input :focus, thus exiting this state.
        search:not(:has(
        .pagefind-ui__search-input:focus,
        .pagefind-ui__drawer:not(.pagefind-ui__hidden)
    )) {
            @include header-icon('search');

            // Remove the extra margin between icons and <search>
            // (we don't need it because the <search> is just an icon visually)
            margin-left: 0;

            .pagefind-ui__search-input {
                background: none;
                border: none;
                color: transparent;

                // Take all available space
                position: absolute;
                top: 0;
                left: 0;
                height: var(--header-button-size);
                width: var(--header-button-size);

                &::placeholder {
                    color: transparent;
                }

                &:hover {
                    cursor: pointer;
                }
            }

            .pagefind-ui__search-clear {
                display: none;
            }
        }
    }


    // Entirely different behavior when activated in mode C
    @media (width <= $search-mobile-width) {
        search:has(
        .pagefind-ui__search-input:focus,
        .pagefind-ui__drawer:not(.pagefind-ui__hidden)
    ) {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;

            .pagefind-ui__search-input {
                @include reset-input;

                background: var(--background-color);
                color: var(--text-color);

                transition: none;

                box-sizing: border-box;
                width: 100%;
                height: var(--header-height);

                border: none;
                border-radius: 0;

                font-size: 1.3rem;
                padding: 0 var(--global-padding-horizontal) !important;
            }

            .pagefind-ui__search-clear {
                @include reset-input;
                @include svg-icon('close', var(--highlight-accent-color));

                position: absolute;
                top: 0;
                right: 0;
                height: var(--header-height);
                width: var(--header-height);

                cursor: pointer;

                &:hover {
                    @include svg-icon('close', var(--text-color));
                }
            }

            .pagefind-ui__drawer {
                position: absolute;
                top: calc(var(--header-height) + var(--separator-size));
                right: 0;
                left: 0;
                height: calc(100svh - var(--header-height) - var(--separator-size));

                background: var(--background-color);
                padding: var(--card-padding-horizontal) var(--global-padding-horizontal);
            }
        }

        body:has(.pagefind-ui__drawer:not(.pagefind-ui__hidden)) {
            overflow: hidden;
        }
    }
}