import React, {useState, useEffect} from "react";
// import { useDispatch } from "react-redux";
import { useNavigate, useParams } from "react-router-dom";
// import { customerSlice } from "./../../store";
import { AuthService, ResourceService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Download, Pencil, Archive } from "react-bootstrap-icons";

const ViewResource = () => {
  const navigate = useNavigate();
  const urlParams = useParams();
  const [currentResource, setCurrentResource] =  useState(undefined);
  
  const params = new URLSearchParams(window.location.search);
  
  const redirectTo = () => {
    navigate(`/medical/resources/list`);
  }

  const goToEdit = (id) => {
    navigate(`/medical/resources/edit/${id}`)
  }

  const deactivateResource = (id) => {
    const data = {
      status: 'inactive'
    };
    ResourceService.disableResource(id, data).then(() => {
      redirectTo();
    })
  }

  useEffect(() => {
    if (!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`);
    }
    ResourceService.getResource(urlParams.id).then(resourceData => {
      setCurrentResource(resourceData.data);
    })
  }, []);

  return (
    <>
      <div className="list row mb-4">
        <Breadcrumb>
          <Breadcrumb.Item>Medical</Breadcrumb.Item>
          <Breadcrumb.Item active>
            Provider Information
          </Breadcrumb.Item>
          <Breadcrumb.Item active>
            View Provider Details
          </Breadcrumb.Item>
        </Breadcrumb>
        <div className="col-md-12 text-primary">
           <h4>View Provider Information <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="providerInfo" id="providerss-tab">
            <Tab eventKey="providerInfo" title="Provider Information">
              <h6 className="text-primary">Basic Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Name</div> 
                  <div className="field-value">{currentResource?.name}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Office Name</div> 
                  <div className="field-value">{currentResource?.name_original}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Branch Name</div> 
                  <div className="field-value">{currentResource?.name_branch}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Specialty</div> 
                  <div className="field-value">{currentResource?.specialty}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Type</div> 
                  <div className="field-value">{currentResource?.type}</div>
                </div>
              </div>
              <h6 className="text-primary">Contact Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Office Phone Number</div> 
                  <div className="field-value">{currentResource?.phone}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Contact</div> 
                  <div className="field-value">{currentResource?.contact}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Fax Number</div> 
                  <div className="field-value">{currentResource?.fax}</div>
                </div>
              </div>
              <h6 className="text-primary">Provider Address</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Address</div> 
                  <div className="field-value">{`${currentResource?.address}, ${currentResource?.city}, ${currentResource?.state}, ${currentResource?.zipcode}`}</div>
                </div>
              </div>
              <h6 className="text-primary">Additional Information</h6>
              <div className="app-main-content-fields-section">
                <div className="field-body">
                  <div className="field-label">Note</div> 
                  <div className="field-value">{currentResource?.note}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Description</div> 
                  <div className="field-value">{currentResource?.description}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Color</div> 
                  <div className="field-value">{currentResource?.color}</div>
                </div>
                <div className="field-body">
                  <div className="field-label">Status</div> 
                  <div className="field-value">{currentResource?.status}</div>
                </div>
              </div>
            </Tab>
          </Tabs>
          <div className="list-func-panel">
            <button className="btn btn-primary me-2" onClick={() => goToEdit(currentResource?.id)}><Pencil size={16} className="me-2"></Pencil>Edit</button>
            <button className="btn btn-primary me-2" onClick={() => deactivateResource()}><Archive size={16} className="me-2"></Archive>Archive</button>
            {/* <button className="btn btn-primary"><Download size={16} className="me-2"></Download>Download</button> */}
          </div>
        </div>
      </div>
    </>
  );
};

export default ViewResource;