import React, { Component } from "react";
import { Link } from "react-router-dom";
import ArrowIcon from "../../Assets/Image/icon-arrow.svg";
import "./Tile.css";
import LoaderContainer from "../../Components/Containers/LoaderContainer";
import Button from "../UI/Button";

class Tile extends Component {
  constructor(props) {
    super(props);
    this.viewDetailsHref = this.props.viewDetailsHref;
    this.showViewDetails = this.props.viewDetailsHref != null;
    this.viewConfigHref = this.props.viewConfigHref;
    this.showViewConfig = this.props.viewConfigHref != null;
    this.state = {
      toggleNotification: false,
    };
  }

  showNotification = (e) => {
    var self = this;
    self.setState({ toggleNotification: !self.state.toggleNotification });
    this.props.onToggleNotification(!self.state.toggleNotification);
  };

  getControls() {
    if (this.props.isShowNoification) {
      return (
        <span>
          <Button onClick={this.showNotification}>View All</Button>
          <Button onClick={this.showNotification}>
            <img src={ArrowIcon} alt="arrow_icon" />
          </Button>
        </span>
      );
    } else {
      return (
        <span>
          <Link to={this.viewDetailsHref} target="_parent">
            View All
          </Link>
          <Link to={this.viewDetailsHref} target="_parent">
            <img src={ArrowIcon} alt="arrow_icon" />
          </Link>
        </span>
      );
    }
  }

  render() {
    return (
      <div className={this.props.isLoading ? "loading op-tile" : "op-tile"}>
        {this.props.isLoading ? (
          <LoaderContainer></LoaderContainer>
        ) : (
          <div>
            {this.props.children}
            <div className="op-tile-footer">{this.getControls()}</div>
          </div>
        )}
      </div>
    );
  }
}

export default Tile;