import { TextHighlighted } from '@preply/ds-web-lib';
import React, { FC } from 'react';

import { useTokenSearchContext } from '../providers/useTokenSearchContext';

import { Div } from './SearchTerms.styles';

const SearchById = ({ id }) => (
    <>
        Searching for token ID <TextHighlighted highlight="blue">{id}</TextHighlighted>.
    </>
);

const SearchByName = ({ terms, colorScheme, results }) => (
    <>
        Found {results.length} results matching{' '}
        <TextHighlighted highlight="green">{terms}</TextHighlighted>{' '}
        {colorScheme ? (
            <>
                within <TextHighlighted highlight="green">color scheme aware</TextHighlighted>{' '}
                tokens.
            </>
        ) : (
            <>within tokens without color scheme.</>
        )}
    </>
);

const NotFiltered = ({ colorScheme, results }) => (
    <>
        {colorScheme ? (
            <>
                Showing all <TextHighlighted highlight="blue">{results.length}</TextHighlighted>{' '}
                tokens that are{' '}
                <TextHighlighted highlight="green">color scheme aware</TextHighlighted>.
            </>
        ) : (
            <>
                Showing all <TextHighlighted highlight="blue">{results.length}</TextHighlighted>{' '}
                color scheme anostic tokens.
            </>
        )}
    </>
);

export const SearchTerms: FC = () => {
    const { terms, colorScheme, results } = useTokenSearchContext();
    const id = terms?.startsWith('--') && terms?.substring(2);
    return (
        <Div>
            <p>
                {id && <SearchById id={id} />}
                {terms && !id && (
                    <SearchByName terms={terms} colorScheme={colorScheme} results={results} />
                )}
                {!terms && !id && <NotFiltered colorScheme={colorScheme} results={results} />}{' '}
                {colorScheme && (
                    <a href="./?path=/story/guides-color-schemes-intro--page">Learn more</a>
                )}
            </p>
        </Div>
    );
};
