import React from 'react';
import { LoaderWrapper } from '@orchard/frontend-react-components';
import cx from 'classnames';
import { CLASSNAME as CX_RESULTS } from './constants';
import {
    CLASSNAME as CLASSNAME_OPTION,
    CLASSNAME_IMAGE,
    CLASSNAME_BODY,
    CLASSNAME_TITLE,
} from './search-result-option';

export const NUMBER_OF_ITEMS = 3;
export const CLASSNAME = 'SearchResultsLoadingIndicator';
export const CLASSNAME_HEADER = `${CX_RESULTS}-heading`;
export const CLASSNAME_COVER = `${CLASSNAME}-cover`;
export const CLASSNAME_LINE = `${CLASSNAME}-line`;
export const CLASSNAME_LINE_SM = `${CLASSNAME}-line-sm`;

export const SearchLoaderItem: React.FC = () => (
    <div className={CLASSNAME_OPTION}>
        <div className={cx(CLASSNAME_COVER, CLASSNAME_IMAGE)} />
        <div className={CLASSNAME_BODY}>
            <div className={cx(CLASSNAME_LINE, CLASSNAME_TITLE)} />
            <div className={CLASSNAME_LINE} />
        </div>
        <div className={CLASSNAME_LINE_SM} />
    </div>
);

interface SearchLoaderGroupProps {
    title?: string;
}

export const SearchLoaderGroup: React.FC<SearchLoaderGroupProps> = ({
    title,
}) => (
    <LoaderWrapper
        header={<div className={CLASSNAME_HEADER}>{title}</div>}
        numberOfItems={NUMBER_OF_ITEMS}
        content={SearchLoaderItem}
        vertical
    />
);

interface SearchLoadingIndicatorProps {
    categories?: string[];
    formatMessage: (term: string) => string;
}

const SearchLoadingIndicator: React.FC<SearchLoadingIndicatorProps> = ({
    categories = ['result'],
    formatMessage,
}) => (
    <div className={CLASSNAME} data-testid="gs-loading-indicator">
        {categories.map(category => (
            <SearchLoaderGroup
                key={category}
                title={formatMessage(`${category}Plural`)}
            />
        ))}
    </div>
);

export default SearchLoadingIndicator;