//this class returns a list of cards to the DOM
//by mapping (looping) over an array

class IdeaList {
  constructor() {
    this._ideaListEl = document.querySelector('#idea-list');
    this._ideas = [
      {
        id: 1,
        text: 'Idea 1',
        username: 'John',
        date: '02/01/2023',
        tag: 'Business',
      },
      {
        id: 2,
        text: 'Idea 2',
        username: 'Jimmy',
        date: '02/01/2023',
        tag: 'Technology',
      },
      {
        id: 3,
        text: 'Idea 3',
        username: 'Jill',
        date: '02/01/2023',
        tag: 'Fashion',
      },
    ];

    //adding a set (datatype)
    this._validTags = new Set();
    this._validTags.add('technology');
    this._validTags.add('software');
    this._validTags.add('business');
    this._validTags.add('education');
    this._validTags.add('health');
    this._validTags.add('inventions');
  }

  getTagClass(tag) {
    tag = tag.toLowerCase();
    let tagClass = '';
    //check if the tag that is passed in is within the set
    if (this._validTags.has(tag)) {
      tagClass = `tag-${tag}`;
    } else {
      tagClass = '';
    }
    return tagClass;
  }

  render() {
    //use map on the array, creating a card for each item in the array and display
    // them on the DOM
    //map takes in a function as a parameter

    this._ideaListEl.innerHTML = this._ideas
      .map((idea) => {
        //passing the tag entered for each item into the getTagClass function on each iteration of the map
        const tagClass = this.getTagClass(idea.tag);
        //it will be  treated as an array of template strings
        return `

            <div class="card">
            <button class="delete"><i class="fas fa-times"></i></button>
            <h3>
                ${idea.text}
            </h3>
            <p class="tag ${tagClass}">${idea.tag.toUpperCase()}</p>
            <p>
                Posted on <span class="date">${idea.date}</span> by
                <span class="author">${idea.username}</span>
            </p>
            </div>
        
        `;
      })
      .join(''); //to turn it back in to a string
  }
}

export default IdeaList;