// Cloned by Conner Milstead on 4 Dec 2023 from World "Practical Attempt" by Conner Milstead 
// Please leave this clone trail here.
 
 
 //creating output
document.write ( `

<h1> Spotify API </h1>

From:
<a href='https://developer.spotify.com/documentation/web-api/tutorials/getting-started'>Spotify For Developers</a>.
<br> 

<pre>

</pre>

<h3> Enter Your Client Infomation </h3>

You will need both a Client ID and a Client Secret Code in order to use this. <br>
Go and create your own app in order to get this information   
<a href='https://developer.spotify.com/dashboard'>here</a>.
<br>
Enter the client information below and then learn more about your favorite Spotify artists!
<br>
<p>

<div id=enterID>
Enter Client ID: 
	<input    style='width:25vw;'    maxlength='2000'   NAME="clientID"    id="clientID"       VALUE='a08dcf1b58c54473b85e15a2a1c98288' >  
	<button onclick='setID();' class=ab-normbutton >Set Client ID</button>
</div>

<pre>

</pre>

<div id=enterSecret>
Enter Client Secret: 
	<input    style='width:25vw;'    maxlength='2000'   NAME="clientSecret"    id="clientSecret"       VALUE='106a086a299b45d5bd0bce52f1d08470' >  
	<button onclick='setSecret();'  class=ab-normbutton >Set Client Secret</button>
</div>

<pre>

</pre>

<div style="width:60vw; background-color:white;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Enter a Spotify Artist Name </h3>
<INPUT style="width:50vw;" id=me value=" " >
<button onclick="sendchat();"     class=ab-normbutton > Enter </button> 
</div>

<div style="width:60vw; background-color:#ffffcc;  border: 1px solid black; margin:20; padding: 20px;">
<h3> Spotify Artists Info:  </h3>
<div id=them > </div>
</div>

<pre>

</pre>

` );





///////
var client_id = 'a08dcf1b58c54473b85e15a2a1c98288';

function setID(){
    client_id = jQuery("input#clientID").val();
}

var client_secret = '106a086a299b45d5bd0bce52f1d08470';

function setSecret(){
    client_secret = jQuery("input#clientSecret").val();
}

var credentials = client_id + ':' + client_secret;
var encodedCredentials = btoa(credentials);

var accessToken;

var authOptions = {
  method: 'POST',
  headers: {
    'Authorization': 'Basic ' + encodedCredentials,
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  body: 'grant_type=client_credentials'
};

fetch('https://accounts.spotify.com/api/token', authOptions)
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(body) {
      accessToken = body.accessToken;
    console.log('Response Body:', body); // Output the entire response body JSON
    // Use the body object as needed
  })
  .catch(function(error) {
    console.log('There was a problem with the fetch operation: ', error.message);
  });
  
  
  
  
  
  
/////////
// Function to get artist ID by name
function getArtistID(artistName, accessToken) {
  var searchQuery = encodeURIComponent(artistName);
  var searchURL = `https://api.spotify.com/v1/search?q=${searchQuery}&type=artist`;

  var options = {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer ' + accessToken
    }
  };

  return fetch(searchURL, options)
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok.');
    })
    .then(function(data) {
      // Extracting the artist ID from the response
      var artists = data.artists.items;
      if (artists.length > 0) {
        return artists[0].id; // Return the first artist's ID
      } else {
        throw new Error('Artist not found.');
      }
    })
    .catch(function(error) {
      console.log('Error:', error.message);
      return null; // Return null if there's an error
    });
}



/////////
// Usage:
var artistName = 'Radiohead'; // Replace with the desired artist name
var yourAccessToken = accessToken; // Replace with your actual Spotify access token

getArtistID(artistName, yourAccessToken)
  .then(function(artistID) {
    if (artistID) {
      console.log(`The artist ID for ${artistName} is ${artistID}`);
      // Use the artist ID as needed
    } else {
      console.log('Artist ID not found.');
    }
  });



/////////
//Example artist ID for "Radiohead"
//var artistId = '4Z8W4fKeB5YxbusRsdQVPb'; // Spotify artist ID
//var accessToken  = accessToken;

var artistName = document.getElementById('me').value;

var artistOptions = {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + accessToken
  }
};

fetch('https://api.spotify.com/v1/artists/' + artistId, artistOptions)
  .then(function(response) {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(function(artistData) {
    console.log('Artist Data:', artistData);
    // Use the artist data as needed
  })
  .catch(function(error) {
    console.log('There was a problem with the fetch operation: ', error.message);
  });
  
  
  
  
  
  ///////
  //sendChat function
  function sendchat() {
  var artistName = document.getElementById('me').value; // Get the artist name from the input field

  getArtistID(artistName, accessToken)
    .then(function(artistID) {
      if (artistID) {
        // Fetch artist data using the obtained artist ID
        var artistOptions = {
          method: 'GET',
          headers: {
            'Authorization': 'Bearer ' + accessToken
          }
        };

        return fetch('https://api.spotify.com/v1/artists/' + artistID, artistOptions);
      } else {
        throw new Error('Artist ID not found.');
      }
    })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok.');
    })
    .then(function(artistData) {
      // Display artist information in the HTML element with ID 'them'
      var artistInfoElement = document.getElementById('them');
      var genres = artistData.genres.join(', '); // Join genres into a string

      artistInfoElement.innerHTML = `
        <h4>${artistData.name}</h4>
        <p>Followers: ${artistData.followers.total}</p>
        <p>Popularity: ${artistData.popularity}</p>
        <p>Genres: ${artistData.genres}</p>
        <!-- Add more artist information as needed -->
      `;
    })
    .catch(function(error) {
      console.log('Error:', error.message);
    });
}