import React, {Fragment, useEffect, useState} from 'react'
import {getArtist, getArtistDiscs} from "../services/entity_service";
import {CoverArt} from './CoverArt';
import {Paginate} from "./Paginate";
import {EntityList} from "./EntityList";
import queryString from "query-string";


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

    const handlePageChanged = (page) => {
        props.onPageChanged(page);
    }

    let discsComponent = <Fragment/>;
    if (discs) {
        const items = discs.map((disc) => ({
          'cover': <CoverArt disc={disc}/>,
          'link': `/disc/${disc.id}`,
          'title': disc.title,
          'subtitle': disc.artist.name
        }));
        discsComponent = <EntityList items={items} grid={true}/>
    }

    let paginateContent;
    if (paginate) {
        const total = paginate.total;
        const currentPage = paginate.current_page;
        const pageLimit = paginate.per_page;

        paginateContent = <Paginate totalRecords={total} pageLimit={pageLimit}
                                    currentPage={currentPage} pageNeighbours={2}
                                    onPageChanged={handlePageChanged} makeLink={props.makeLink}/>
    }

    return (
        <div className='discs'>
            <h2>Discos</h2>
            {discsComponent}
            {paginateContent}
        </div>
    )
}

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

                <div>
                    <button className='button'>Agregar a mi Lista</button>
                </div>
            </div>
        )
    } else {
        return <></>
    }
}

export const ArtistView = (props) => {
    const parsedParams = queryString.parse(props.location.search);

    const [artist, setArtist] = useState(null);
    const [discs, setDiscs] = useState(null);
    const [discsPaginate, setDiscsPaginate] = useState(null);
    const [page, setPage] = useState(!isNaN(+parsedParams.page) ? +parsedParams.page : 1)

    const mbid = props.match.params.mbid;

    useEffect(() => {
        if (mbid) {
            getArtist(mbid).then((result) => setArtist(result));
            getArtistDiscs(mbid, page, 16).then((result) => {
                setDiscs(result.discs);
                setDiscsPaginate(result.paginate);
            });
        }
    }, [mbid, page])

    const makeLink = (page) => {
        return `/artist/${mbid}?page=${page}`;
    }

    const handleDiscPageChanged = (page) => {
        setDiscs(null);
        setPage(page);

        getArtistDiscs(mbid, page, 16).then((result) => {
            setDiscs(result.discs);
            setDiscsPaginate(result.paginate);
        });
        props.history.push(makeLink(page));
    }

    const handleNavigateToDisc = (disc) => {
        console.log(disc);
        props.history.push(`/disc/${disc.id}`)
    }


    return (
        <div className='artist-view'>
            <Artist artist={artist}/>
            {artist && <Discs discs={discs} paginate={discsPaginate} onPageChanged={handleDiscPageChanged} makeLink={makeLink} navigateToDisc={handleNavigateToDisc}/>}
        </div>
    );
}