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 )
  
  const contacts = [
    {
      "userId": 1,
      "firstName": "Krish",
      "lastName": "Lee",
      "phoneNumber": "123456",
      "emailAddress": "krish.lee@learningcontainer.com",
      "type":"Clinet"
    },
    {
      "userId": 2,
      "firstName": "racks",
      "lastName": "jacson",
      "phoneNumber": "123456",
      "emailAddress": "racks.jacson@learningcontainer.com",
      "type":"Vendor"
    },
    {
      "userId": 3,
      "firstName": "denial",
      "lastName": "roast",
      "phoneNumber": "33333333",
      "emailAddress": "denial.roast@learningcontainer.com",
      "type":"vendor"
    },
    {
      "userId": 4,
      "firstName": "devid",
      "lastName": "neo",
      "phoneNumber": "222222222",
      "emailAddress": "devid.neo@learningcontainer.com",
      "type":"employee"
    },
    {
      "userId": 5,
      "firstName": "jone",
      "lastName": "mac",
      "phoneNumber": "111111111",
      "emailAddress": "jone.mac@learningcontainer.com",
      "type":"employee"
    }
  ]
  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;