import * as React from 'react';
import { useIntl } from 'react-intl';
import { SearchInput } from '@box/blueprint-web';
import Logo from './Logo';
import messages from '../messages';
import { VIEW_FOLDER, VIEW_SEARCH } from '../../../constants';
import type { View } from '../../../common/types/core';

import './Header.scss';

type HeaderProps = {
    isHeaderLogoVisible?: boolean,
    logoUrl?: string,
    onSearch: any,
    view: View
};

const Header = ({
    isHeaderLogoVisible = true,
    view,
    onSearch,
    logoUrl,
}: HeaderProps) => {
    const { formatMessage } = useIntl();
    const searchMessage = formatMessage(messages.searchPlaceholder);
    const isFolder = view === VIEW_FOLDER;
    const isSearch = view === VIEW_SEARCH;

    return (
        <div className="be-header">
            {isHeaderLogoVisible && <Logo url={logoUrl} />}
            <div className="be-search">
                <SearchInput
                    disabled={!isFolder && !isSearch}
                    onChange={onSearch}
                    placeholder={searchMessage}
                    searchInputAriaLabel={searchMessage}
                    searchInputClearAriaLabel={formatMessage(messages.searchClear)}
                    variant="global"
                />
            </div>
        </div>
    );
};

export default Header;