import React, { useState, useEffect, useRef, useCallback } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
import Button from "@material-ui/core/Button";
import { useNavigate } from "react-router-dom";
import { isAutheticated } from "src/auth";
import swal from "sweetalert";
import debounce from "lodash.debounce";

const TerritoryManager = () => {
  const token = isAutheticated();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(true);
  const [territorymanagersData, setTerritoryManagersData] = useState([]);

  const nameRef = useRef();
  const mobileRef = useRef();
  const VerifyTerritoryManagerRef = useRef();

  const [currentPage, setCurrentPage] = useState(1);
  const [itemPerPage, setItemPerPage] = useState(10);
  const [totalData, setTotalData] = useState(0);

  const getTerritoryManagersData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(`/api/territorymanager/getAll/`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        params: {
          page: currentPage,
          show: itemPerPage,
          name: nameRef.current.value,
          mobileNumber: mobileRef.current.value,
          isVerified: VerifyTerritoryManagerRef.current.value,
        },
      });
      setTerritoryManagersData(res.data?.territoryManager);
      setTotalData(res.data?.total_data);
    } catch (err) {
      const msg = err?.response?.data?.message || "Something went wrong!";
      swal({
        title: "Error",
        text: msg,
        icon: "error",
        button: "Retry",
        dangerMode: true,
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getTerritoryManagersData();
  }, [success, itemPerPage, currentPage]);

  const debouncedSearch = useCallback(
    debounce(() => {
      setCurrentPage(1);
      getTerritoryManagersData();
    }, 500),
    []
  );

  const handleSearchChange = () => {
    debouncedSearch();
  };

  const handleDelete = (id) => {
    swal({
      title: "Are you sure?",
      icon: "error",
      buttons: {
        Yes: { text: "Yes", value: true },
        Cancel: { text: "Cancel", value: "cancel" },
      },
    }).then((value) => {
      if (value === true) {
        axios
          .delete(`/api/territorymanager/delete/${id}`, {
            headers: {
              "Access-Control-Allow-Origin": "*",
              Authorization: `Bearer ${token}`,
            },
          })
          .then((res) => {
            swal({
              title: "Deleted",
              text: "TerritoryManager Deleted successfully!",
              icon: "success",
              button: "ok",
            });
            setSuccess((prev) => !prev);
          })
          .catch((err) => {
            let msg = err?.response?.data?.message
              ? err?.response?.data?.message
              : "Something went wrong!";
            swal({
              title: "Warning",
              text: msg,
              icon: "error",
              button: "Retry",
              dangerMode: true,
            });
          });
      }
    });
  };

  return (
    <div className="main-content">
      <div className="page-content">
        <div className="container-fluid">
          <div className="row">
            <div className="col-12">
              <div className="page-title-box d-flex align-items-center justify-content-between">
                <div style={{ fontSize: "22px" }} className="fw-bold">
                  Territory Managers
                </div>
                <div className="page-title-right">
                  <Button
                    variant="contained"
                    color="primary"
                    className="font-bold mb-2 capitalize mr-2"
                    onClick={() => {
                      navigate("/territorymanager/add", { replace: true });
                    }}
                  >
                    Add Territory Manager
                  </Button>
                  <Button
                    variant="contained"
                    color="primary"
                    className="font-bold mb-2 capitalize"
                    onClick={() =>
                      navigate("/add-territory-manager/multiple", {
                        replace: true,
                      })
                    }
                  >
                    Upload Spreadsheet
                  </Button>
                </div>
              </div>
            </div>
          </div>

          <div className="row">
            <div className="col-lg-12">
              <div className="card">
                <div className="card-body">
                  <div className="row ml-0 mr-0 mb-10">
                    <div className="col-lg-1">
                      <div className="dataTables_length">
                        <label className="w-100">
                          Show
                          <select
                            onChange={(e) => {
                              setItemPerPage(e.target.value);
                              setCurrentPage(1);
                            }}
                            className="form-control"
                            disabled={loading}
                          >
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                          </select>
                          entries
                        </label>
                      </div>
                    </div>
                    <div className="col-lg-3">
                      <label>Territory Manager Name:</label>
                      <input
                        type="text"
                        placeholder="Territory Manager name"
                        className="form-control"
                        ref={nameRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      />
                    </div>
                    <div className="col-lg-3">
                      <label>Mobile Number:</label>
                      <input
                        type="text"
                        placeholder="Mobile Number"
                        className="form-control"
                        ref={mobileRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      />
                    </div>
                    <div className="col-lg-3">
                      <label>Filter by Verify:</label>
                      <select
                        className="form-control"
                        ref={VerifyTerritoryManagerRef}
                        onChange={handleSearchChange}
                        disabled={loading}
                      >
                        <option value="">----Select----</option>
                        <option value="true">YES</option>
                        <option value="false">NO</option>
                      </select>
                    </div>
                  </div>

                  <div className="table-responsive table-shoot mt-3">
                    <table className="table table-centered table-nowrap">
                      <thead
                        className="thead-light"
                        style={{ background: "#ecdddd" }}
                      >
                        <tr>
                          <th style={{ width: "9%" }}>Unique Id </th>
                          <th style={{ width: "17%" }}>Name</th>
                          <th style={{ width: "11%" }}>Mobile No.</th>
                          <th style={{ width: "17%" }}>Email</th>
                          <th style={{ width: "6%" }}>Verify</th>
                          <th style={{ width: "10%" }}>Register On</th>
                          <th className="text-center" style={{ width: "17%" }}>Mapping</th>
                          <th className="text-center" style={{ width: "13%" }}>
                            Action
                          </th>
                        </tr>
                      </thead>

                      <tbody>
                        {loading ? (
                          <tr>
                            <td className="text-center" colSpan="8">
                              Loading...
                            </td>
                          </tr>
                        ) : territorymanagersData?.length > 0 ? (
                          territorymanagersData?.map((territorymanager, i) => {
                            return (
                              <tr key={i}>
                                <td className="text-start">
                                  {territorymanager?.uniqueId}
                                </td>
                                <td className="text-start">
                                  {territorymanager?.name}
                                </td>
                                <td className="text-start">
                                  {territorymanager?.mobileNumber}
                                </td>
                                <td className="text-start">
                                  {territorymanager?.email ? (
                                    territorymanager?.email
                                  ) : (
                                    <small className="m-0 text-secondary">
                                      No Email Added!
                                    </small>
                                  )}
                                </td>
                                <td className="text-start">
                                  <span
                                    className={`badge text-white ${
                                      territorymanager?.isVerified === true
                                        ? "text-bg-success"
                                        : "text-bg-danger"
                                    }`}
                                  >
                                    {territorymanager?.isVerified
                                      ? "YES"
                                      : "NO"}
                                  </span>
                                </td>
                                <td className="text-start">
                                  {new Date(
                                    territorymanager.createdAt
                                  ).toLocaleString("en-IN", {
                                    // weekday: "short",
                                    month: "short",
                                    day: "numeric",
                                    year: "numeric",
                                    // hour: "numeric",
                                    // minute: "numeric",
                                    // hour12: true,
                                  })}
                                </td>
                                <td className="text-start">
                                  <Link
                                    to={`/view/salescoordinator/${territorymanager._id}`}
                                  >
                                    <button
                                      type="button"
                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table"
                                    >
                                      SC
                                    </button>
                                  </Link>
                                  <Link
                                    to={`/view/principaldistributor/${territorymanager._id}`}
                                  >
                                    <button
                                      type="button"
                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
                                    >
                                      PD
                                    </button>
                                  </Link>
                                  <Link
                                    to={`/view/retaildistributor/${territorymanager._id}`}
                                  >
                                    <button
                                      type="button"
                                      className="btn btn-primary btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
                                    >
                                      Retailer
                                    </button>
                                  </Link>
                                </td>
                                <td className="text-end">
                                  <Link
                                    to={`/territorymanager/edit/${territorymanager._id}`}
                                  >
                                    <button
                                      type="button"
                                      className="btn btn-info btn-sm  waves-effect waves-light btn-table"
                                    >
                                      Edit
                                    </button>
                                  </Link>

                                  <button
                                    type="button"
                                    style={{ color: "white" }}
                                    className="btn btn-danger btn-sm  waves-effect waves-light btn-table ml-1 md-mt-1 md-ml-0"
                                    onClick={() =>
                                      handleDelete(territorymanager._id)
                                    }
                                  >
                                    Delete
                                  </button>
                                </td>
                              </tr>
                            );
                          })
                        ) : (
                          <tr>
                            <td className="text-center" colSpan="8">
                              No Territory Manager found!
                            </td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                  <div className="d-flex justify-content-between">
                    <div>
                      Showing {territorymanagersData?.length} of {totalData}{" "}
                      entries
                    </div>
                    <div>
                      <button
                        onClick={() => setCurrentPage(currentPage - 1)}
                        disabled={currentPage === 1 || loading}
                        className="btn btn-primary"
                      >
                        Previous
                      </button>
                      <button
                        onClick={() => setCurrentPage(currentPage + 1)}
                        disabled={
                          territorymanagersData?.length < itemPerPage || loading
                        }
                        className="btn btn-primary ml-2"
                      >
                        Next
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TerritoryManager;