import SearchIcon from '../../../../../../node_modules/@mui/icons-material/esm/Search.mjs';
import React__default, { useState, useCallback, useEffect } from 'react';
import { Keys } from '../utils/keys.mjs';
import styled from '../../../../../../node_modules/@mui/material/styles/styled.mjs';

const SearchBarContainer = styled('div')({
    position: 'relative',
    width: '100%'
});
const IconContainer$1 = styled('div')(({ theme })=>({
        alignItems: 'center',
        display: 'flex',
        justifyContent: 'center',
        position: 'absolute',
        bottom: 0,
        marginBottom: theme.spacing(1)
    }));
const SearchIconContainer = styled(IconContainer$1)(({ theme })=>({
        padding: theme.spacing(0.5, 1, 0, 1)
    }));
const SlashIconContainer = styled(IconContainer$1)(({ theme })=>({
        bottom: -2,
        right: 0,
        display: 'flex',
        position: 'absolute',
        alignItems: 'center',
        marginBottom: theme.spacing(1),
        justifyContent: 'center',
        marginRight: theme.spacing(1)
    }));
const SlashIcon = styled('div')(({ theme })=>({
        border: '1px solid',
        borderRadius: theme.shape.borderRadius,
        padding: theme.spacing(0, 1)
    }));
const SearchInputContainer = styled('div')(({ theme })=>({
        '& input': {
            paddingLeft: `${theme.spacing(4)} !important`,
            paddingRight: `${theme.spacing(6)} !important`
        },
        '&:hover': {
            cursor: 'pointer'
        }
    }));
const SearchBarCore = ({ InputComponent: Input, searchIconContainerSx, slashIconSx, slashIconContainerSx, ...inputProps })=>{
    const [inputRef, setInputRef] = useState(null);
    const [focused, setFocused] = useState(false);
    const onFocus = useCallback(()=>setFocused(true), []);
    const onBlur = useCallback(()=>setFocused(false), []);
    useEffect(()=>{
        const handleKey = (e)=>{
            if (inputRef && !focused) {
                if (e.metaKey && e.key === Keys.K || e.key === Keys.ForwardSlash) {
                    e.stopPropagation();
                    inputRef.focus();
                    if (e.key === Keys.ForwardSlash) {
                        e.preventDefault();
                    }
                }
            }
        };
        document.addEventListener('keydown', handleKey);
        return ()=>document.removeEventListener('keydown', handleKey);
    }, [
        inputRef,
        focused
    ]);
    return /*#__PURE__*/ React__default.createElement(SearchBarContainer, null, /*#__PURE__*/ React__default.createElement(SearchIconContainer, {
        sx: searchIconContainerSx
    }, /*#__PURE__*/ React__default.createElement(SearchIcon, {
        fontSize: "small"
    })), /*#__PURE__*/ React__default.createElement(SlashIconContainer, {
        sx: slashIconContainerSx
    }, /*#__PURE__*/ React__default.createElement(SlashIcon, {
        sx: slashIconSx
    }, "/")), /*#__PURE__*/ React__default.createElement(SearchInputContainer, null, /*#__PURE__*/ React__default.createElement(Input, {
        ...inputProps,
        fullWidth: true,
        inputRef: setInputRef,
        onBlur: onBlur,
        onFocus: onFocus
    })));
};

export { SearchBarCore };
//# sourceMappingURL=SearchBar.mjs.map
