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 {Entity} from "./Entity";
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 <Entity title={artist.name}
      subtitle={[artist.type, artist.country].filter(Boolean).join(' - ')}
      tags={artist.tags.map((tag) => (tag.name))}
      buttonText='Agregar a mi list'/>
  }else {
    return <Fragment></Fragment>
  }
}

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>
  );
}