import *  as React from "react";
import * as moment from "moment";

// import deleteIcon from "../../assets/noun_Delete_1676375.svg";
const printIcon = require("../assets/noun_print_2117815.svg")
const pdfIcon = require("../assets/noun_export pdf_2021663.svg")
const csvIcon = require("../assets/noun_export csv_2021662.svg");
const filterIcon = require("../assets/filter.png");
const confirmIcon = require("../assets/noun_confirm_275573.svg");
import "./style.css";

export interface SearchProps { filterData, filters, removeFilter, textSearch, exportPDF, exportCSV, deleteAudits }

export default class Search extends React.Component<SearchProps, {}> {
  state = {
    searchTerm: "",
    showPanel: false,
    filterEnabled: false,
    filterName: "",
    filterText: "",
  }

  toggleFilter(filterKey, filterEnabled) {
    this.setState({
      filterName: filterKey,
      filterText: "",
      filterEnabled
    })
  }

  createFilterObject(e) {
    e.preventDefault();

    const { filterText, filterName } = this.state;
    let obj;
    let value;
    console.log({ filterName });
    if (filterText) {
      if (filterName === "createdAt") {
        switch (filterText) {
          case "last_day":
            value = moment().subtract(1, "days");
            break;
          case "last_week":
            value = moment().subtract(7, "days");
            break;
          case "last_month":
            value = moment().subtract(30, "days");
            break;
          case "last_year":
            value = moment().subtract(365, "days");
            break;
          default:
            value = moment();
        }
        obj = {
          key: filterName,
          value: { $gt: value }
        };
      } else {
        obj = {
          key: filterName,
          value: filterText
        };
      }
      this.props.filterData(obj);
    }
    this.setState({ filterText: "" });
    this.toggleFilter("", false);
  }

  render() {

    const { searchTerm, showPanel, filterEnabled } = this.state
    const { filterName, filterText } = this.state

    return (
      <div>
        <div className="fe-audits-separator fe-audits-search-div">
          <div className="fe-audits-search-form-div">
            <form
              className="fe-audits-search-form"
              onSubmit={e => {
                e.preventDefault();
                this.props.textSearch(searchTerm);
              }}>
              <input
                type="text"
                value={searchTerm}
                onChange={e => this.setState({ searchTerm: e.target.value })}
                placeholder="Search by any text"
                className="fe-audits-search-input fe-audits-search-box-content fe-audits-search-box"
              />
            </form>
            <div
              onClick={() => this.setState({ showPanel: !showPanel })}
              className={
                this.props.filters.length !== 0
                  ? "fe-audits-filter-tags fe-audits-dis-sm-block fe-audits-filter-tags-visible"
                  : "fe-audits-filter-tags fe-audits-dis-sm-block"
              }>
              <span>
                <img src={filterIcon} alt="filter" width={25} height={25} />
              </span>
              <span
                className={
                  this.props.filters.length !== 0
                    ? "fe-audits-filter-marker-change fe-audits-filter-marker"
                    : "fe-audits-filter-marker"
                }>
                <p>{this.props.filters.length}</p>
              </span>
            </div>
          </div>
          <div className="fe-audits-filter-text-container">
            <div
              onClick={() => this.setState({ showPanel: !showPanel })}
              className={
                this.props.filters.length !== 0
                  ? "fe-audits-filter-tags fe-audits-dis-sm-none fe-audits-filter-tags-visible"
                  : "fe-audits-filter-tags fe-audits-dis-sm-none"
              }>
              <span>
                <img src={filterIcon} alt="filter" width={25} height={25} />
              </span>
              <span
                className={
                  this.props.filters.length !== 0
                    ? "fe-audits-filter-marker-change fe-audits-filter-marker"
                    : "fe-audits-filter-marker"
                }>
                {this.props.filters.length}
              </span>
            </div>
            <div
              className={`fe-audits-search-box-content fe-audits-hide-box fe-audits-display-box ${this.props
                .filters.length === 0 && "d-none"}`}
              style={{ minHeight: "2rem" }}>
              <ul className="fe-audits-search-box-ul">
                {this.props.filters.length !== 0
                  ? this.props.filters.map((filter, index) => (
                    <li key={index} className="fe-audits-search-li-active">
                      <span className="fe-audits-filter-text">{`${
                        filter.key
                        }: ${
                        filter.key === "createdAt"
                          ? moment(filter.value.$gt).format("DD/MM/YYYY")
                          : filter.value
                        }`}</span>
                      <span
                        className="fe-audits-cancel-icon"
                        onClick={() => this.props.removeFilter(filter)}>
                        ⓧ
                        </span>
                    </li>
                  ))
                  : null}
              </ul>
            </div>
          </div>
          <div className="fe-audits-hide-box">
            <ul className="fe-audits-search-icon-ul">
              {/* <li onClick={() => this.props.deleteAudits()}>
                <img src={deleteIcon} alt="deleteIcon" className="fe-audits-action-icon" />
              </li> */}
              <li>
                <img
                  src={printIcon}
                  alt="printIcon"
                  className="fe-audits-action-icon"
                />
              </li>
              <li onClick={() => this.props.exportPDF()}>
                <img
                  src={pdfIcon}
                  alt="PDFIcon"
                  className="fe-audits-action-icon"
                />
              </li>
              <li onClick={() => this.props.exportCSV()}>
                <img
                  src={csvIcon}
                  alt="CSVIcon"
                  className="fe-audits-action-icon"
                />
              </li>
            </ul>
          </div>
        </div>
        {showPanel && (
          <div className="fe-audits-search-filter-div">
            <h5 className="fe-audits-search-user-text">
              Filter By{" "}
              {filterEnabled
                ? filterName === "createdAt"
                  ? "Time"
                  : filterName.charAt(0).toUpperCase() + filterName.slice(1)
                : "Options"}
              <span
                className="fe-audits-cancel-filter-btn"
                onClick={() =>
                  filterEnabled ? this.toggleFilter("", false) : this.setState({ showPanel: false })
                }>
                X
              </span>
            </h5>
            {!filterEnabled ? (
              <div>
                <ul className="fe-audits-search-filters-ul">
                  <li onClick={() => this.toggleFilter("createdAt", true)}>
                    <span>Time</span>
                    <span className="fe-audits-search-icon">></span>
                  </li>
                  <li onClick={() => this.toggleFilter("user", true)}>
                    <span>User</span>
                    <span className="fe-audits-search-icon">></span>
                  </li>
                  <li onClick={() => this.toggleFilter("resource", true)}>
                    <span>Resource</span>
                    <span className="fe-audits-search-icon">></span>
                  </li>
                </ul>
              </div>
            ) : (
                <form onSubmit={e => this.createFilterObject(e)}>
                  <div className="fe-audits-search-user-input-div">
                    {filterName === "createdAt" ? (
                      <select
                        className="fe-audits-filter-select"
                        value={filterText || "select"}
                        onChange={e => this.setState({ filterText: e.target.value })}>
                        <option disabled value="select">
                          Select Time
                      </option>
                        <option value="last_day">Last Day</option>
                        <option value="last_week">Last Week</option>
                        <option value="last_month">Last Month</option>
                        <option value="last_year">Last Year</option>
                      </select>
                    ) : (
                        <input
                          type={"text"}
                          placeholder="Search by text..."
                          className="fe-audits-search-user-input"
                          value={filterText}
                          onChange={e => this.setState({ filterText: e.target.value })}
                        />
                      )}
                    <div
                      className="fe-audits-confirm-btn"
                      onClick={e => this.createFilterObject(e)}>
                      <img src={confirmIcon} width="20px" alt="confirm" />
                    </div>
                  </div>
                </form>
              )}
          </div>
        )}
      </div>
    );
  }
}