import React, { Component } from "react";
import GearIcon from "../../Assets/Image/gears.svg";
import "./Tile2x.css";
import DatePicker from "react-datepicker";
import IconRefreshBlue from "../../Assets/Image/icon-refresh.svg";
import CloseIcon from "../../Assets/Image/close.svg";
import { Link } from "react-router-dom";
import Constants from "../../Utilities/Constants";

class Tile2x extends Component {
  constructor(props) {
    super(props);
    this.title = this.props.title;
    this.viewDetailsHref = this.props.viewDetailsHref;

    this.viewConfigHref = this.props.viewConfigHref;
    this.showViewConfig = this.props.viewConfigHref != null;
    this.state = {
      startDate: null,
      isNitialLoadWithCustomFilter: this.props.isNitialLoadWithCustomFilter,
      link: {
        pathname: "/transactions",
        filter: {
          result: "NotSet",
          types: ["NotSet"],
          title: "",
          start_date: "",
          end_date: "",
        },
      },
    };
  }

  componentDidMount() {
    console.log("state Tile2xTile2x", this.state);
  }

  async clearDateFilter(e) {
    var self = this;
    this.setState(
      {
        startDate: null,
        isNitialLoadWithCustomFilter: false,
      },
      async () => {
        await self.props.doHandleDateChange(self.state.startDate);
      }
    );
  }

  handleChange = async (date, props) => {
    console.log("handlechange date", date);
    console.log("handlechange props", props);

    console.log("thedate", date);

    // var self = this;
    this.setState(
      {
        startDate: date,
      },
      async function () {
        await props.doHandleDateChange(date);
      }
    );
  };

  render() {
    return (
      <div
        className={
          this.props.transactionLoading === 0
            ? "op-tile-2x loading"
            : "op-tile-2x"
        }
      >
        <div className="op-tile-2x-head">
          <h2 className="op-tile-2x-title">
            {this.props.title}
            {this.props.showDatePicker && this.props.showDatePicker === true ? (
              <div className="transaction-datepicker">
                <DatePicker
                  selected={this.state.startDate}
                  dateFormat={Constants.Formats().Date.Default}
                  onChange={(e) => this.handleChange(e, this.props)}
                />
                {(this.state.startDate &&
                  this.state.startDate.toString().length > 0) ||
                (typeof this.state.isNitialLoadWithCustomFilter !=
                  "undefined" &&
                  this.state.isNitialLoadWithCustomFilter === true) ? (
                  <img
                    src={IconRefreshBlue}
                    alt="arrow_icon"
                    onClick={(e) => this.clearDateFilter()}
                    className="icon-refresh"
                  />
                ) : (
                  ""
                )}
                {this.props.transactionWidgetFilter ? (
                  <div
                    className={`${this.props.transactionWidgetFilter} widget-filter`}
                  >
                    <p>{this.props.transactionWidgetFilter}</p>
                    <span>
                      {/* <a href="/transactions"><img src={CloseIcon} alt="close_icon"/></a> */}
                      <Link to={this.state.link}>
                        <img src={CloseIcon} alt="close_icon" />
                      </Link>
                    </span>
                  </div>
                ) : null}
              </div>
            ) : null}

            {this.props.title === "Transactions" ? (
              <div className="transaction-close">
                <a href="/dashboard">
                  <i className="fa fa-times"></i>
                </a>
              </div>
            ) : null}
          </h2>

          <p>
            {this.props.title === "Recent Transactions" ? (
              <a href={this.viewDetailsHref}>View All</a>
            ) : null}
          </p>
        </div>
        <div className="op-tile-2x-options">
          {this.showViewConfig ? (
            <a href={this.viewConfigHref}>
              <img src={GearIcon} height="32" alt="Settings" />
            </a>
          ) : null}
        </div>
        {this.props.children}
      </div>
    );
  }
}

export default Tile2x;