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

import http from '../http';

export default function Offer(offer) {
    const { want: { data: details } } = offer;

    const [accepted, setAccepted] = useState(offer.status !== 'pending');

    async function onClick() {
        const [error] = await http.postOfferAccept(offer.id);
        if (error) return false;
        setAccepted(true);
    }

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

    return (
        <div class="offer">
            <section>
                <h2>{details.artists_sort} - {details.title} <a href={details.uri} target="_blank"><ExternalLink /></a></h2>
                <h5 class='alt-text' >{details.year}</h5>
                <h5 class='alt-text'>{details.formats[0].descriptions.join(' ')}</h5>
                <h5 class='number'>${offer.total}</h5>
            </section>
            <img src={details.thumb} />
            <button onClick={onClick} disabled={accepted} class={classes} >{btnText}</button>
        </div>
    )
}