import { h } from 'preact';
import { ExternalLink, Check } from 'react-feather';
import { useState } from 'preact/hooks';

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

import http from '../http';

function OfferLine(offer) {
    const ws = useSelector((state: State) => state.ws);

    function setStatus(status) {
        ws.sendOfferStatusSet(offer.id, status);
    }

    const accepted = offer.status === 'Accepted';
    const classes = `${accepted ? 'accepted' : ''}`;
    const btnText = accepted
        ? offer.status
        : 'Accept';

    const negBtn = accepted
        ? <button onClick={() => setStatus('Pending')} class='neg'>Cancel</button>
        : <button onClick={() => setStatus('Declined')} class='neg'>Decline</button>;

    return (
        <div class="line">
            <span class='number'>${offer.total}</span>
            <button onClick={() => setStatus('Accepted')} disabled={accepted} class={classes} >{btnText}</button>
            {negBtn}
        </div>
    )
}

function OfferPriceBtn(offer) {
    const ws = useSelector((state: State) => state.ws);
    const accepted = offer.status === 'Accepted';
    const confirmed = offer.status === 'Confirmed';

    function setStatus() {
        if (accepted) return ws.sendOfferStatusSet(offer.id, 'Pending')
        ws.sendOfferStatusSet(offer.id, 'Accepted');
    }

    const classes = `${accepted ? 'accepted' : ''} ${confirmed ? 'confirmed' : ''}`;
    const btnText = accepted
        ? offer.status
        : 'Accept';

    return (
        <button disabled={confirmed} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
    )
}


export default function WantOffers(wantOffers) {
    const ws = useSelector((state: State) => state.ws);

    const details = wantOffers[0].want.data;

    return (
        <div class="offer">
            <section>
                <h3>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h3>
                <div class='alt-text' >{details.year}</div>
                <div class='alt-text'>{details.formats.map(f => f.descriptions.join(' ')).join(' ')}</div>
            </section>
            <img src={details.thumb} />
            <div class="lines">
                {wantOffers.map(o => OfferPriceBtn(o))}
            </div>
        </div>
    )
}