import { h } from 'preact';
import { route } from 'preact-router';
import { useSelector } from 'react-redux'

import { State } from './../store';
import * as toast from './../toast';

import OfferGroup from './../components/offer.group';

const GroupNav = (want) => {
    const href = want._count.offers ? `#${want.release}` : null;
    return (
        <div class=''>
            <a href={href}>{want.data.artists_sort} - {want.data.title}</a>
            <span>{want._count.offers}</span>
        </div>
    );
};

function Home() {
    const offers = useSelector((state: State) => state.offers);
    const wants = useSelector((state: State) => state.wants);

    if (offers && offers.length === 0) {
        toast.info('no offers', 'You have no offers yet, search for some more items.');
        route('/search');
    }

    if (!offers || !wants) return <div>loading...</div>;

    return (
        <main >
            <nav>
                <div class='header'>
                    <span>record</span>
                    <span>offers</span>
                </div>
                {wants.map(GroupNav)}
            </nav>
            <div class={'offers'}>
                {offers.map(OfferGroup)}
            </div>
        </main>
    );
}

export default Home;