import React, {useEffect, useState} from 'react'
import queryString from "query-string";

import {getArtist, getArtistDiscs} from "../services/entity_service";

import {CoverArt} from '../components/CoverArt';
import {Paginate} from "../components/Paginate";
import {EntityList} from "../components/EntityList";
import {Entity} from "../components/Entity";
import {Comments} from "../components/Comments";
import {Grid, RowCol} from '../components/Grid';


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

  if (!props.render) {
    return null;
  }

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

  let discsComponent = <EntityList placeholder={true} size={16} cover={true} grid={true}/>;
  if (discs) {
    if(discs.length > 0){
      const items = discs.map((disc) => {
        const cover = <CoverArt disc={disc} size={3}/>;
        return {
          'cover': cover,
          'link': `/disc/${disc.id}`,
          'title': disc.title,
          'subtitle': disc.artist.name
        }
      });
      const list = [{
        'items': items
      }]
      discsComponent = <EntityList list={list} grid={true}/>
    }else{
      discsComponent = <p>El artista no tiene discos</p>
    }
  }

  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 (
    <Grid>
      <RowCol><h2>Discos</h2></RowCol>
      <RowCol>{discsComponent}</RowCol>
      <RowCol>{paginateContent}</RowCol>
    </Grid>
  )
}

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))}
      type={'artist'}
      entity={artist.id}
      />
  }else {
    return null;
  }
}

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 (
    <Grid>
      <RowCol><Artist artist={artist}/></RowCol>
      <RowCol>
        <Discs render={artist} discs={discs} paginate={discsPaginate}
          onPageChanged={handleDiscPageChanged} makeLink={makeLink}
          navigateToDisc={handleNavigateToDisc}/>
      </RowCol>
      <RowCol><Comments render={artist}/></RowCol>
    </Grid>
  );
}
