import React, {useState, useEffect} from "react";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { AuthService, CenterPhoneService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Columns, Download, Send, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";

const CenterPhoneList = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [phones, setPhones] = useState([]);
  const [keyword, setKeyword] = useState('');
  const params = new URLSearchParams(window.location.search);

  useEffect(() => {
    if (!AuthService.canAddOrEditRoutes() && !AuthService.canViewRoutes()&&!AuthService.canAccessLegacySystem()) {
      window.alert('You haven\'t login yet OR this user does not have access to this page. Please change an admin account to login.')
      AuthService.logout();
      navigate(`/login`);
    }
    CenterPhoneService.getAll().then((data) =>
      setPhones(data.data)
    );
  }, []);

  const redirectToAdmin = () => {
    if (params.get('from') === 'medical') {
      navigate(`/medical/`);
    } else {
      navigate(`/admin/customer-report`)
    }
    
  }

  const redirectTo = () => {
    navigate(`/messages/list`)
  }

  const goToEdit = (id) => {
    navigate(`/center-phones/edit/${id}`)
  }

  const goToCreateNew = () => {
    navigate(`/center-phones`)
  }

  
  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item href="/">General</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Center Phone
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>
             All Phones <button className="btn btn-link btn-sm" onClick={() => {redirectTo()}}>Back</button>
           </h4> 
        </div>
      </div>

      <div className="app-main-content-list-container">
				<div className="app-main-content-list-func-container">
					<Tabs defaultActiveKey="allMessages" id="messages-tab">
						<Tab eventKey="allMessages" title="All Messages">
              <table className="personnel-info-table"> 
                <thead>
                  <tr>
                    <th className="th-index">No.</th>
                    <th>Phone Title</th>
                    <th>Phone Number</th>
                    <th>Activated</th>
                  </tr>
                  
                </thead>
                <tbody>
                  {
                    phones && phones.filter((item)=> item?.phone_number.includes(keyword) || item?.phone_title.toLowerCase().includes(keyword.toLowerCase())).map((phone, index )=> <tr key={phone.id}>
                       <td className="td-index">{index + 1}</td>
                      <td> <PencilSquare size={16} className="clickable me-2" onClick={() => goToEdit(phone?.id)}></PencilSquare> { phone?.phone_title }</td>
                      <td>{phone?.phone_number}</td>
                      <td>{phone?.activated ? 'Yes': 'No'}</td>
                      <td>
                        <button className="btn btn-primary btn-sm" onClick={() => goToEdit(phone?.id)}>Edit</button> 
                      </td>
                    </tr>)
                  }
                </tbody>
              </table>
            </Tab>
          </Tabs>
          <div className="list-func-panel">
						<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword}  onChange={(e) => setKeyword(e.currentTarget.value)} />
						{/* <button className="btn btn-primary me-2"><Columns size={16} className="me-2"></Columns>Manage Table</button> */}
            <button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Phone</button>
						{/* <button className="btn btn-primary"><Download size={16} className="me-2"></Download>Export</button> */}
					</div>
        </div>
      </div>
    </>
  )
};

export default CenterPhoneList;