import { TransitionState } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import React, { useRef, useState } from 'react';
import { SwitchTransition } from 'react-transition-group';
import { Box, Divider } from '@wix/design-system';
import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
import { CollectionSearch } from '../CollectionSearch';
import { EditorXLogo } from '../EditorXLogo';
import { WixLogo } from '../WixLogo';
import { PickerStandaloneLayoutTitles } from './PickerStandaloneLayoutTitles';
import { Collapse } from '../Collapse';
import { Fade } from '../Fade';
import { ExpandableSearch } from '../ExpandableSearch';
function _PickerStandaloneLayoutHeader(props) {
    const { state, hideSearch } = props;
    const { picker, logoType, isMobileView, isDuringSearch } = state;
    const { collection, isScrollTop } = picker;
    const searchRef = useRef();
    const onSearchFocus = () => {
        state.setIsDuringSearch(true);
    };
    const onSearchBlur = () => {
        if (collection.query.search.isEmpty) {
            state.setIsDuringSearch(false);
        }
    };
    const onBackClicked = async () => {
        searchRef.current?.focus();
        await collection.clearSearch();
        searchRef.current?.blur();
    };
    const { headerProps, header, headerDivider, titleSearchContainerProps, titleDivider, } = isMobileView
        ? {
            headerProps: {
                padding: '12px 24px',
                align: 'space-between',
            },
            header: (React.createElement(React.Fragment, null,
                React.createElement(SwitchTransition, null,
                    React.createElement(Fade, { timeout: 150, key: isDuringSearch ? 1 : 0 },
                        React.createElement("div", { style: { display: 'flex' } }, isDuringSearch ? (React.createElement(ChevronLeftLarge, { height: 24, width: 24, onClick: onBackClicked, style: { cursor: 'pointer' } })) : (React.createElement(Box, { align: "center", verticalAlign: "middle", boxSizing: "border-box" }, logoType === 'editorx' ? (React.createElement(EditorXLogo, { height: 16 })) : (React.createElement(WixLogo, { height: 16 }))))))),
                React.createElement(ExpandableSearch, { visibility: hideSearch ? 'hidden' : undefined, expandable: true, onBlur: onSearchBlur, onFocus: onSearchFocus, inputRef: (input) => {
                        searchRef.current = input;
                    } }))),
            headerDivider: undefined,
            titleSearchContainerProps: {
                paddingBottom: !isScrollTop && !collection.result.isEmpty ? 0 : 'SP2',
            },
            titleDivider: !isScrollTop && !collection.result.isEmpty && (React.createElement(Box, { margin: "0 15px", height: "12px", boxShadow: "0 5px 5px -5px rgb(32 48 60 / 20%)", zIndex: 9999999 })),
        }
        : {
            headerProps: {
                padding: '24px 30px',
                align: 'center',
            },
            header: (React.createElement(Box, { align: "center", verticalAlign: "middle", boxSizing: "border-box" }, logoType === 'editorx' ? (React.createElement(EditorXLogo, { height: 18 })) : (React.createElement(WixLogo, { height: 24 })))),
            headerDivider: React.createElement(Divider, null),
            titleSearchContainerProps: {
                paddingTop: 'SP4',
                paddingBottom: 'SP3',
                gap: 'SP3',
            },
            titleDivider: !hideSearch && (React.createElement(Box, { display: "flex", direction: "vertical", paddingLeft: "94px", paddingRight: "94px" },
                React.createElement(CollectionSearch, { minWidthPixels: "100%" }))),
        };
    const [collapse] = useState(() => new TransitionState(true));
    return (React.createElement(React.Fragment, null,
        React.createElement(Box, { direction: "horizontal", boxSizing: "border-box", verticalAlign: "middle", ...headerProps }, header),
        headerDivider,
        React.createElement(Box, { display: "grid", direction: "vertical", ...titleSearchContainerProps },
            React.createElement(Collapse, { state: collapse, in: !isDuringSearch, timeout: 300 },
                React.createElement(Fade, { in: !isDuringSearch, timeout: 300 },
                    React.createElement(PickerStandaloneLayoutTitles, { ...props }))),
            titleDivider)));
}
export const PickerStandaloneLayoutHeader = observer(_PickerStandaloneLayoutHeader);
//# sourceMappingURL=PickerStandaloneLayoutHeader.js.map