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

import http from './../http';

import { useSelector, useDispatch } from 'react-redux'
import { State } from './../store';

enum Status {
    Accepted     = 'Accepted',
    Pending      = 'Pending',
    Declined     = 'Declined',
    Confirmed    = 'Confirmed',
    Complete     = 'Complete',
}

const POSITIVE_STATUS = [Status.Accepted, Status.Confirmed, Status.Complete];

function Item({ item }) {
    const ws = useSelector((state: State) => state.ws);
    console.log(item);

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

    function onChange(e) {
        ws.sendAcpOfferStatusSet(item.id, e.target.value);
    }

    const bold = POSITIVE_STATUS.includes(item.status)
        ? 'bold'
        : '';

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

function SellerGroup(group) {
    const ready = group.offers.filter(item => POSITIVE_STATUS.includes(item.status)).length;

    return (
        <div class="bundle">
           <section>
                <h2>{group.username} - {group.seller}</h2>
                <h3>{ready} / {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 = useSelector((state: State) => state.acpOffers);
    const ws = useSelector((state: State) => state.ws);

    function sync() {
        ws.sendAcpListingsSync();
    }

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

    return (
        <div>
            <button onClick={sync}> sync listings </button>
            <hr />
            <div class='bundles'>
                {offers.map(SellerGroup)}
            </div>
        </div>
    );
}

export default Home;