import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Container, Row, Col, Badge } from "react-bootstrap";
import NavBar from "../../components/navbar/navbar";
import CategoryTopicCard from "../../components/common/categoryTopicCard";
import { tagSearch } from "../../reducers/tagSlice";

function TagSearchPage(props) {
  const {
    match: { params },
  } = props;
  const tagTopics = useSelector((state) => state.tag.search);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(tagSearch({ _id: params.id}));
  }, params.id);

  if (tagTopics.isCompleted) {
    return (
      <Container fluid>
        <NavBar history={props.history} />
        <Container className="primary-container">
          <Row className="center-row">
            <Col>
              <h2 className="dashboard-category-name">
                Topics (Tag: {" "}
                <Badge
                  pill
                  variant=""
                  className="primary-big-tag"
                  style={{ backgroundColor: tagTopics.tag.hexColorCode }}
                >
                  {tagTopics.tag.name}
                </Badge>)
              </h2>
            </Col>
          </Row>
          <Row className="tag-page-topics-container">
            {tagTopics.topics.map((topic) => (
              <Col key={topic._id} md="6">
                <CategoryTopicCard
                  entityType="topic"
                  category={{ _id: topic.parentCategory }}
                  topic={topic}
                />
              </Col>
            ))}
          </Row>
        </Container>
      </Container>
    );
  } else {
    return null;
  }
}

export default TagSearchPage;