import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';
import { connect } from 'unistore/preact'

import http from './../http';
import AcpOffer from './../components/acp.offer';

import { Status } from './../../../api/src/offers';

function Item({ item, ws }) {
    const statuses = Object.entries(Status).map(([label, value]) => (
        <option value={value}>{label}</option>
    ));

    function onChange(e) {
        console.log(item.id, e.target.value);
    }

    return (
        <div key={item.id}>
            <a href={item.listing.data.uri} target="_blank" >
                <h4>{item.listing.data.release.description}</h4>
            </a>
            <h5 class='alt-text'>{item.total}</h5>
            <h5>{item.status}</h5>
            <select onChange={onChange}>
                {statuses}
            </select>
        </div>
    );
}

function SellerGroup(group) {
    return (
        <div class="bundle">
           <section>
                <h2>{group.username} - {group.seller}</h2>
                <h3>{group.offers.length} offers</h3>
                <h4>Ships: {group.mentionsAustralia && 'AU'} {group.mentionsWorldwide && 'WORLD'}</h4>
            </section>

            <div class='items'>
                {group.offers.map(i => <Item item={i} />)}
            </div>
        </div>
    )
}

function Home() {
    const [offers, setOffers] = useState([]);

    useEffect(() => {
        async function getOffers() {
            const [error, offers] = await http.getOffersAcp();
            if (error) return console.error(error);
            setOffers(offers);
        }
        getOffers();
    }, []);

    if (!offers.length) {
        return (
            <div class={'offers'}>
                loading...
            </div>
        );
    }


    return (
        <div class='bundles'>
            {offers.map(SellerGroup)}
        </div>
    );
}

export default Home;