import React, {useEffect, useState} from 'react'
import {getArtist, getArtistDiscs} from "../services/entity_service";
import {CoverWithCaption} from './CoverArt';
import ReactJson from "react-json-view";

export const Discs = (props) => {
    const discs = props.discs ? props.discs.discs : null;
    const paginate = props.discs ? props.discs.paginate : null;

    if (discs) {
        return (
            <div className='discs'>
                <h2>Discos</h2>
                <ul className={'discs-list'}>
                    {discs.map((disc, index) => {
                        return (
                            <div className='cover-container'>
                                <CoverWithCaption key={index} cover_art={disc.cover_art} alt={`Cover art del disco ${disc.title}`} caption={disc.title}/>
                            </div>
                        )
                    })}
                </ul>
            </div>
    )
    } else return <></>
}

export const Artist = (props) => {
    const artist = props.artist;
    if (artist) {
        return (
            <div className='artist'>
                <div className='space-between'>
                    <div className='title'>
                        <h1>{artist.name}</h1>
                        <h4>{[artist.type, artist.country].filter(Boolean).join(' - ')}</h4>
                    </div>
                    <div>
                        <button className='button'>Agregar a mi Lista</button>
                    </div>
                </div>
                <ul className='tags'>
                    {artist.tags.map((tag, index) => (<li key={index}>{tag.name}</li>))}
                </ul>
            </div>
        )
    } else {
        return <></>
    }
}

export const ArtistView = (props) => {
    const [artist, setArtist] = useState(null);
    const [discs, setDiscs] = useState(null);
    const mbid = props.match.params.mbid;

    useEffect(() => {
        if (mbid) {
            getArtist(mbid).then((result) => setArtist(result));
            getArtistDiscs(mbid, 15).then((result) => setDiscs(result));
        }
    }, [mbid])

    return (
        <div className='artist-view'>
            <Artist artist={artist}/>
            <Discs discs={discs}/>
            {!mbid && <p>AHH</p>}
        </div>
    );
}