import React, { createContext, useContext,useState } from "react";
import { useParams } from "react-router-dom";
import Breadcrumb from "../../components/common/Breadcrumb";
import Profile from "../../components/Tenant/Profile";

import { useTenantDetails } from "../../hooks/useTenant";
import Organization from "../../components/Tenant/Organization";
import { ComingSoonPage } from "../Misc/ComingSoonPage";
import GlobalModel from "../../components/common/GlobalModel";
import EditProfile from "../../components/Tenant/EditProfile";
import SubScriptionHistory from "../../components/Tenant/SubScriptionHistory";

const TenantDetailsContext = createContext();
export const useTenantDetailsContext = () => useContext(TenantDetailsContext);


const TenantDetails = () => {
  const { tenantId } = useParams();
  const { data, isLoading, isError, error } = useTenantDetails(tenantId);
  const [editTenant, setEditTenant] = useState(false);
  const contextValues ={
    setEditTenant,editTenant
  }
  

  const tabs = [
    {
      id: "navs-left-home",
      label: "Profile",
      icon: "bx bx-user-circle",
      iconSize: "bx-sm",
      content: <Profile data={data} />,
    },

    {
      id: "navs-left-bill",
      label: "Bills and Plan ",
      icon: "bx bx-receipt",
      iconSize: "bx-sm",
      content: (
        <div className="text-center">
          <SubScriptionHistory tenantId={tenantId} />
        </div>
      ),
    },

    {
      id: "navs-left-messages",
      label: "Messages",
      icon: "bx bx-message-rounded",
      iconSize: "bx-sm",
      content: (
        <div className="text-center">
          <ComingSoonPage />
        </div>
      ),
    },
  ];
  
  if (isLoading) return <div className="my-4">Loading...</div>;
  if (isError) return <div className="my-3">{error.message}</div>;
  return (
    <>
    <TenantDetailsContext.Provider value={contextValues}>
       <div className="container-fluid py-0">
      <Breadcrumb
        data={[
          { label: "Home", link: "/dashboard" },
          { label: "Tenant", link: "/tenants" },
          { label: "Tenant Details", link: null },
        ]}
      />

      <div className="nav-align-left nav-tabs-shadow mb-6">
        <ul className="nav nav-tabs py-2 page-min-h" role="tablist">
          {tabs.map((tab, index) => (
            <li key={tab.id} className="nav-item">
              <button
                type="button"
                className={`nav-link d-flex align-items-center gap-2 ${
                  index === 0 ? "active" : ""
                }`}
                role="tab"
                data-bs-toggle="tab"
                data-bs-target={`#${tab.id}`}
                aria-controls={tab.id}
                aria-selected={index === 0}
              >
                {tab.icon && <i className={`${tab.icon} ${tab.iconSize}`} />}
                {tab.label}
              </button>
            </li>
          ))}
        </ul>

        <div className="tab-content">
          {tabs.map((tab, index) => (
            <div
              key={tab.id}
              className={`tab-pane fade ${
                index === 0 ? "show active" : ""
              } text-start`}
              id={tab.id}
            >
              {tab.content}
            </div>
          ))}
        </div>
      </div>
     
    </div>
    </TenantDetailsContext.Provider>
    {editTenant && (
        <GlobalModel size="lg" isOpen={editTenant} closeModal={()=>setEditTenant(false)}>
           <EditProfile TenantId={tenantId} onClose={()=>setEditTenant(false)}/>
        </GlobalModel>
      )}
      </>
  );
};

export default TenantDetails;