import React, { useState, useEffect } from 'react'
import './Artist.scss'

const star = (
  <svg width="497" height="473" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>Layer 1</title>
      <polygon stroke="#b6b6b6" points="248.63946533203125,2.5 309.48846435546875,177.55484008789062 494.77880859375,181.33078002929688 347.09527587890625,293.2965545654297 400.761962890625,470.68504333496094 248.63946533203125,364.82884216308594 96.51692199707031,470.68504333496094 150.18370056152344,293.2965545654297 2.5,181.33078002929688 187.7904052734375,177.55484008789062 248.63946533203125,2.5 309.48846435546875,177.55484008789062 " strokeWidth="20" strokecolor="#000000" fill="#d7d7d7" orient="point" r2="47.37444" r="118.43611" point="5" shape="star" id="svg_1" cy="137.5" cx="221"/>
    </g>
  </svg>
)

function Artist({ props, callback }) {
  let [rate, setRate] = useState([])

  useEffect(() => {
    let stars = []
    for (let i=0; i<Math.ceil(props.popularity/20); i++) {
      stars.push(star)
    }

    setRate(stars)
  }, [props])

  const openAlbums = () => {
    callback(props.id)
  }

  return (
    <div className='artist' onClick={openAlbums}>
      <div className='picture'>
        {props.images.length > 0 && (
          <img src={props.images[0].url} alt={props.name} />
        )}
      </div>

      <div className='details'>
        <div className='text'>
          <h2>{props.name}</h2>
          <p>{props.followers.total.toLocaleString()} followers</p>
        </div>

        <div className='rate'>
          <ul>
            {rate.map((point, index) => (
              <li key={index}>
                {point}
              </li>
            ))}
          </ul>
        </div>

      </div>

    </div>
  )
}

export default Artist