import React from "react";
import PropTypes from "prop-types";

import {isEmpty} from "lodash";
import {containsSubstringCaseInsensitive, IsoTimeToUnixTime} from "../utils/common";

export const withEnquiries = () => Component => {
  return class WithEnquiries extends React.Component {
    static propTypes = {
      // connect
      getEnquiries: PropTypes.func.isRequired,
      getEnquiryComments: PropTypes.func.isRequired,
      setOpenedCommentId: PropTypes.func.isRequired,
      enquiries: PropTypes.shape({
        loadingEnquiries: PropTypes.bool.isRequired,
        loadingComments: PropTypes.bool.isRequired,
        list: PropTypes.array,
        users: PropTypes.array,
        comments: PropTypes.array,
        openedCommentId: PropTypes.number,
        enquiriesError: PropTypes.bool.isRequired,
        commentsError: PropTypes.bool.isRequired
      }).isRequired,
      user: PropTypes.object.isRequired,
      // From PopupHolder.js (MainSection)
      status: PropTypes.string,
      unqualifiedStatus: PropTypes.string,
      searchQuery: PropTypes.string
    };

    // Get enquiries on load if there are no enquiries in store yet
    componentDidMount() {
      if (isEmpty(this.props.enquiries.list)) {
        this.props.getEnquiries();
      }
    }

    // Get comments from clicked enquiry in dashboard
    handleGetEnquiryComments = (e, id) => {
      this.props.setOpenedCommentId(id);
      // Check if comments of this enquiry are already in store
      if (!this.props.enquiries.comments.some(comment => comment.id === id)) {
        this.props.getEnquiryComments(id);
      }
    };
    // Parse enquiries object from store
    getListEnquiries = () => {
      if (this.props.enquiries.loading)
        return null;

      const {enquiries, status, unqualifiedStatus, searchQuery} = this.props;

      let lst = enquiries.list;

      lst = lst.sort((a, b) => IsoTimeToUnixTime(a["updated_at"]) - IsoTimeToUnixTime(b["updated_at"]));

      if (isEmpty(lst))
        return (
          <tr>
            <td>No enquiries</td>
          </tr>
        );

      // Filter enquiries by status
      const listEnquiries = lst.reduceRight((list, enquiry) => {
        const enquiryUser = this.getEnquiryUser(enquiry.requester_id);
        if (!enquiryUser)
          return list;

        // Show only enquiries related to current user (agent)
        // if (user.email === enquiry.fields[5].value) {

        switch (status) {
          case "pending":
            if (enquiry.status !== "pending" && enquiry.status !== "open") {
              return list;
            }
            break;

          case "qualified":
            // If there's no requsted tag in 'tags', then skip enquiry,
            // add it to 'list' otherwise
            if (!enquiry.tags.some(tag => tag === "leadstatus_qualified__qualified")) {
              return list;
            }
            break;

          case "unqualified":
            if (!enquiry.tags.some(tag => tag.indexOf("unqualified") !== -1)) {
              return list;
            } else {
              // Check for which exactly unqualified status filter enquiries
              switch (unqualifiedStatus) {
                case "notinterested":
                  if (!enquiry.tags.some(tag => tag === "leadstatus_unqualified__not_interested")) {
                    return list;
                  }
                  break;

                case "unresponsive":
                  if (!enquiry.tags.some(tag => tag === "leadstatus_unqualified__unresponsive")) {
                    return list;
                  }
                  break;

                case "inaccurate":
                  if (!enquiry.tags.some(tag => tag === "leadstatus_unqualified__inaccurate_contact_information")) {
                    return list;
                  }
                  break;

                case "other":
                  if (!enquiry.tags.some(tag => tag === "leadstatus_unqualified__other")) {
                    return list;
                  }
                  break;

                default:
                  break;
              }
            }
            break;

          case "referred":
            if (!enquiry.tags.some(tag => tag === "leadstatus_qualified__referred_for_finance")) {
              return list;
            }
            break;

          default:
            break;
        }
        // Search for search field query
        if (searchQuery) {
          // In case property address is null
          if (!enquiry.fields[10].value) {
            // Check if name and email don't satisfy the query
            if (!containsSubstringCaseInsensitive(enquiryUser.name, searchQuery)
              && !containsSubstringCaseInsensitive(enquiryUser.email, searchQuery)) {
              return list;
            }
          } else if (!containsSubstringCaseInsensitive(enquiryUser.name, searchQuery)
            && !containsSubstringCaseInsensitive(enquiryUser.email, searchQuery)
            && !containsSubstringCaseInsensitive(enquiry.fields[10].value, searchQuery)) {
            return list;
          }
        }
        // Accumulate enquiries
        list.push(
          <tr
            key={enquiry.id}
            onClick={e => this.handleGetEnquiryComments(e, enquiry.id)}
          >
            <td>{enquiry.id}</td>
            <td>{enquiryUser.name}</td>
            <td>{enquiryUser.email}</td>
            <td>{enquiryUser.phone || "No number provided"}</td>
            <td>{enquiry.fields[10].value || "No address"}</td>
          </tr>
        );

        return list;
      }, []);
      if (isEmpty(listEnquiries)) {
        return null;
      }
      return listEnquiries;
    };
    // Get current zendesk user instance for matching with enquiries (tickets)
    getEnquiryUser = id => {
      const user = this.props.enquiries.users.filter(user => user.id === id);
      return user[0];
    };
    // Build enquiries table if not empty
    getTableBody = () => {
      const listEnquiries = this.getListEnquiries();

      if (isEmpty(listEnquiries)) return <h4>There are no enquiries</h4>;
      return (
        <table>
          <thead>
          <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Property Address</th>
          </tr>
          </thead>
          <tbody>{listEnquiries}</tbody>
        </table>
      );
    };

    render() {
      return <Component getTableBody={this.getTableBody} {...this.props} />;
    }
  };
};

export default withEnquiries;