import { Feature } from '@preply/ds-core-types';
import React, { FC, useState } from 'react';

import { IconDetails } from './IconDetails';
import { IconList } from './IconList';
import { Div } from './IconSearchResults.styles';
import { useIconSearchContext } from './IconsSearchContext/useIconSearchContext';

export const IconSearchResults: FC = () => {
    const { results } = useIconSearchContext();
    const [selectedIcon, setSelectedIcon] = useState<Feature | null>(null);

    const handleIconClick = (icon: Feature) => {
        setSelectedIcon(icon);
    };

    if (!results) {
        return null;
    }

    return (
        <div>
            <div>
                Results:
                {results && ` ${results.length} icons`}
            </div>
            <Div>
                <IconList
                    icons={results}
                    onIconClick={handleIconClick}
                    selectedIcon={selectedIcon}
                />
                <IconDetails icon={selectedIcon} />
            </Div>
        </div>
    );
};