import {
    align,
    color,
    sizePx,
    spacingPx,
    cursor,
    text,
    borderRadius,
    size,
    states,
    breakpoints,
    theme,
} from '@planview/pv-utilities'
import styled from 'styled-components'

export const StrippedButton = styled.button<{ $focusVisible: boolean }>`
    font-size: 100%;
    font-family: inherit;
    border: none;
    margin: 0;
    padding: 0;
    outline-offset: 0;
    appearance: none;
    background-color: transparent;
    ${cursor.pointer};

    ${(props) => states.focus({ focusVisible: props.$focusVisible })};
`

export const StyledNavigationBar = styled.nav`
    position: relative;
    ${align.centerV};
    ${text.regular};
    color: var(--pvdstoolbar__navigation-text-color, ${color.textInverse});
    width: 100%;
    height: ${sizePx.medium};
    min-height: ${sizePx.medium};
    background-color: var(
        --pvdstoolbar__navigation-bg-color,
        ${theme.componentSpecificTopBarBackground}
    );
    padding: 0 ${spacingPx.small};
    margin: 0;
    z-index: 10;
    box-sizing: border-box;
`

export const NavigationBarStaticWrap = styled.div`
    --pvdsutil__states-focus--normal: ${theme.borderInverse};
    display: contents;
`

export const LeftWrap = styled.div<{ $compact: boolean }>`
    ${align.centerV};
    flex-shrink: 1;
    column-gap: ${spacingPx.small};
    ${(props) => (props.$compact ? `padding-right: ${spacingPx.small}` : null)}
`

export const RightWrap = styled.div`
    ${align.centerV};
    justify-content: space-between;
    flex-grow: 2;
    padding-right: ${spacingPx.small};
    min-width: 0;
`

export const StrippedAnchor = styled.a<{ $focusVisible: boolean }>`
    ${align.centerV};
    ${(props) => states.focus({ focusVisible: props.$focusVisible })};
    outline-offset: 0;
    border: none;
`

export const LogoContainer = styled.div`
    ${align.centerV};
    outline-offset: 0;
    border: none;
`

export const SearchContainer = styled.div<{
    $hasClear: boolean
    $expanded: boolean
    $focusVisible: boolean
}>`
    height: ${sizePx.small};
    background: ${(props) =>
        props.$expanded
            ? `var(--pvdstoolbar__search-input-bg, ${theme.componentSpecificTopBarSearchBackground})`
            : 'transparent'};

    &:hover {
        background: var(
            --pvdstoolbar__search-input-bg,
            ${theme.componentSpecificTopBarSearchBackground}
        );
    }

    ${borderRadius.rounded(size.small)};
    display: flex;
    transition: width 0.3s ease-in-out;
    width: ${(props) => (props.$expanded ? `300px` : `${sizePx.small}`)};
    ${(props) => states.focus({ focusVisible: props.$focusVisible })};
    ${(props) => (!props.$expanded ? cursor.pointer : null)};
`
export const SearchInnerInput = styled.input<{ $expanded: boolean }>`
    background: transparent;
    outline: none;
    border: none;
    ${text.regular};
    color: var(--pvdstoolbar__search-text-color, ${color.textInverse});
    padding: 0;
    width: 100%;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button,
    &::-webkit-search-results-button,
    &::-webkit-search-results-decoration {
        display: none;
    }

    &::placeholder {
        color: var(${theme.componentSpecificTopBarSearchPlaceholder});
    }

    ${breakpoints.phone`
        font-size: 16px;
    `}
`