import { CardGroup, CardBody, Card, CardTitle, Label, React } from "reactstrap";
import styles from "./ArticlesCard.module.scss";

export function ArticlesCard({ articles, selectedTopics }) {

  const getTopicStyleFromTopic = (topic) => {
    switch (topic) {
      case "Pandemic":
        return styles.pandemicTopic
      case "Extreme Weather":
        return styles.extremeWeatherTopic
      case "Rising Temperatures":
        return styles.risingTemperaturesTopic
      case "Sea Level Rise":
        return styles.seaLevelRiseTopic
      case "Energy Consumption":
        return styles.energyConsumptionTopic
      case "Sustainable Materials":
        return styles.sustainableMaterialsTopic
      case "Coastal Ecosystems":
        return styles.coastalEcosystemsTopic
      case "Recycling/Upcycling":
        return styles.recyclingTopic
      case "Green Technology":
        return styles.greenTechTopic
      case "Citizen Science":
          return styles.citizenScienceTopic
      case "Community Engagement":
        return styles.CommEngTopic 
      default:
        return undefined
    }
  }

  const createArticleDisplay = (article, index ) => {
    return (
      <CardGroup className={styles.underline} key={index}>
        <a
          href={article.url || "#"}
          target="_blank"
          style={{ textDecoration: "none", color: "inherit" }}
        >
          <div className={styles.articleDisplay}>
            <Label className={styles.articleTitle}>{article.title}</Label>
            <br />
            <Label className={[styles.articleTopic, getTopicStyleFromTopic(article.topic)].join(" ")}>{article.topic}</Label>
            <Label className={styles.articleSource}>{"Source: " + article.source}</Label>
            <br />
            <Label className={styles.articleDate}>{article.date}</Label>
          </div>
        </a>
      </CardGroup>
    );
  };

  const createArticleList = () => {
    let filteredArticles = articles.filter((article)=>{
      return selectedTopics.includes(article.topic) 
    })
    if(filteredArticles.length == 0){
      return (
        <>
          <h1 className={styles.noArticles}>No Articles Found</h1>
        </>
      )
    }else{
      return filteredArticles.map((article, index) => createArticleDisplay(article,index))
    }
  };

  return (
    <Card className={styles.cards}>
      <CardBody>
        <CardTitle className={styles.underlineTitle}>
          Latest on Your Topics of Interest
        </CardTitle>
        {createArticleList()}
      </CardBody>
    </Card>
  );
}
