import React, { useState } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import IconButton from "../../components/common/IconButton";
import GlobalModel from "../../components/common/GlobalModel";
import ManageDirectory from "../../components/Directory/ManageDirectory";

const Directory = () => {
  const [isOpenModal, setIsOpenModal] = useState(false);
  const closedModel = () => setIsOpenModal(false);

  return (
    <div className="container-xxl flex-grow-1 container-p-y">
      <Breadcrumb
        data={[
          { label: "Home", link: "/dashboard" },
          { label: "Directory", link: null },
        ]}
      ></Breadcrumb>

      <GlobalModel isOpen={isOpenModal} closeModal={closedModel}>
        <ManageDirectory />
      </GlobalModel>

      <div className="row">
        <div className="row mx-0 px-0">
          <div className="col-md-4 col-6 flex-grow-1 mb-2 px-1">
            <input
              type="search"
              className="form-control form-control-sm"
              placeholder="Search projects..."
            />
          </div>
          <div className="col-md-8 col-6 text-end flex-grow-1 mb-2 px-1">
            <button
              type="button"
              className={`btn btn-sm btn-primary `}
              onClick={() => setIsOpenModal(true)}
            >
              <i className="bx bx-plus-circle me-2"></i>
              New Contact
            </button>
          </div>
        </div>
        <div className="table-responsive text-nowrap py-2 ">
          <table className="table px-2">
            <thead>
              <tr>
                <th className="text-start" colSpan="2">
                  Name
                </th>
                <th className="px-2">
                  <div className="d-flex align-items-center gap-1">
                    <IconButton
                      size={12}
                      iconClass="bx bx-envelope"
                      color="primary"
                      onClick={() => alert("User icon clicked")}
                    />
                    <span>Email</span>
                  </div>
                </th>
                <th className="mx-2">
                  <div className="d-flex align-items-center m-0 p-0 gap-1">
                    <IconButton
                      size={12}
                      iconClass="bx bx-phone"
                      color="warning"
                      onClick={() => alert("User icon clicked")}
                    />
                    <span>Phone</span>
                  </div>
                </th>
                <th className="mx-2">
                  <div className="d-flex align-items-center gap-1">
                    <IconButton
                      size={12}
                      iconClass="bx bxs-grid-alt"
                      color="info"
                    />
                    <span>Organization</span>
                  </div>
                </th>
                <th className="mx-2">
                  <div className="dropdown">
                    <a
                      className="dropdown-toggle hide-arrow cursor-pointer align-items-center"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                    >
                      Type <i className="bx bx-filter bx-sm"></i>
                    </a>
                    {/* <ul className="dropdown-menu p-2 text-capitalize">
                          {[
                            { id: 1, label: "Active" },
                            { id: 2, label: "On Hold" },
                            { id: 3, label: "Inactive" },
                            { id: 4, label: "Completed" },
                          ].map(({ id, label }) => (
                            <li key={id}>
                              <div className="form-check">
                                <input
                                  className="form-check-input  "
                                  type="checkbox"
                                  checked={selectedStatuses.includes(id)}
                                  onChange={() => handleStatusChange(id)}
                                />
                                <label className="form-check-label">
                                  {label}
                                </label>
                              </div>
                            </li>
                          ))}
                        </ul> 
                    */}
                  </div>
                </th>
                <th
                //   className={`mx-2 ${
                //     HasManageProject ? "d-sm-table-cell" : "d-none"
                //   }`}
                >
                  Action
                </th>
              </tr>
            </thead>
            <tbody className="table-border-bottom-0 overflow-auto ">
              <tr>
                <td colSpan="12" className="text-center py-4">
                  No projects found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

export default Directory;