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

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

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

function Want(want) {
    const r = want.data;

    const ws = useSelector((state: State) => state.ws);
    const [confirm, setConfirm] = useState(false);

    function onClick() {
        if (confirm) return ws.sendWantRm(want.id);
        setTimeout(() => setConfirm(false), 2500);
        return setConfirm(true);
    };

    const text = confirm
        ? 'confirm'
        : 'remove';

    return (
        <article key={r.id}>
            <div>
                <h3>{r.artists_sort} - {r.title}</h3>
                <h5 class='alt-text' >{r.year}</h5>
                <h5 class='alt-text'>{r.formats[0].descriptions.join(' ')}</h5>
            </div>
            <img src={r.thumb} />
            <button onClick={onClick} >{text}</button>
        </article>
    );
}

export default Want;