import React, { useState } from "react";
import { formatUTCToLocalTime } from "../../utils/dateUtils";
import EditProfile from "./EditProfile";
import GlobalModel from "../common/GlobalModel";
import { useTenantContext } from "../../pages/Tenant/TenantPage";
import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
import IconButton from "../common/IconButton";
import { MANAGE_TENANTS } from "../../utils/constants";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";

const Profile = ({ data }) => {
  const {setEditTenant} = useTenantDetailsContext()
  const canUpdateTenant = useHasUserPermission(MANAGE_TENANTS)
  return (
    <>
      <div className="container-fuid">
       
        <div className="row">
          <div className="col-12">
            <div className="d-flex flex-wrap align-items-start position-relative ">
              <div className=" d-flex align-items-start gap-2 my-1">
                {data.logoImage ? (<img
                  src={data.logoImage}
                  alt="Preview"
                  className="img-thumbnail rounded"
                  style={{ maxHeight: "35px" }}
                />):(   <IconButton
              iconClass="bx bx-sm bx-building"
              color="warning"
              size={8}
            />)}
              </div>
              <div className="ms-2 ">
                <h4 className="m-0">{data.name}</h4>
                <div className="block">
                  <i className="bx bx-globe text-primary bx-xs me-1"></i>
                  <span>{data?.domainName}</span>
                </div>
               {canUpdateTenant && ( <span
                  className="position-absolute top-0 end-0 cursor-auto"
                  onClick={() => setEditTenant(true)}
                >
                  <i className="bx bx-edit bs-sm text-primary cursor-pointer"></i>
                </span>)}
              </div>
            </div>
          </div>
         
          {data?.description && (
            <div className="col rounded-2  justify-content-start p-2">
              <p className="m-0">{data?.description}</p>
            </div>
          )}

          
        </div>
         <div className="divider text-start my-1">
            <div className="divider-text">Personal</div>
          </div>
          <div className="row ">
            <div className="col-12 col-md-6 d-flex align-items-center">
              <i className="bx bx-sm bx-user me-1"></i>
              <span className="fw-semibold">Contact Person:</span>
              <span className="ms-2">{data.contactName}</span>
            </div>

            <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
              <i className="bx bx-sm bx-envelope me-1"></i>
              <span className="fw-semibold">Email:</span>
              <span className="ms-2">{data.email}</span>
            </div>
            <div className="col-12 col-md-6 d-flex align-items-center">
              <i className="bx bx-sm bx-mobile me-1"></i>
              <span className="fw-semibold">Contact Number:</span>
              <span className="ms-2">{data.contactNumber}</span>
            </div>

            {data.billingAddress && (
              <div className="col-12  d-flex text-wrap align-items-start mt-4 m-0">
              <i className='bx bxs-flag-alt bx-sm me-1'></i>
              <span className="fw-semibold">Address:</span>
              <span className="ms-2">{data.billingAddress}</span>
            </div>
            )}
          </div>
        <div className="divider text-start ">
          <div className="divider-text">Organization</div>
        </div>

        <div className="col-12  d-flex align-items-center mb-2">
          <i className="bx bx-sm bxs-building me-1"></i>
          <span className="fw-semibold">Industry:</span>
          <span className="ms-2">{data?.industry?.name}</span>
        </div>
        <div className="row ">
          {data?.taxId && (
            <div className="col-12 col-md-6 d-flex align-items-center ">
              <i className="bx bx-sm bx-id-card me-1"></i>
              <span className="fw-semibold">Tax Id:</span>
              <span className="ms-2">{data?.taxId}</span>
            </div>
          )}
          <div className="col-12 col-md-6 d-flex align-items-center mb-2 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Organization Size:</span>
            <span className="ms-2">{data?.organizationSize}</span>
          </div>
          <div className="col-12 col-md-6 d-flex align-items-center my-2 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Seat Available:</span>
            <span className="ms-2">{data?.seatsAvailable}</span>
          </div>
          <div className="col-12 col-md-6 d-flex align-items-center my-2 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Total Seat:</span>
            <span className="ms-2">{data?.currentPlan?.maxUsers}</span>
          </div>
          <div className="col-12 col-md-6 d-flex align-items-center">
            <i className="bx bx-sm bxs-calendar me-1"></i>
            <span className="fw-semibold">On-Boarding Date:</span>
            <span className="ms-2">
              {formatUTCToLocalTime(data?.onBoardingDate)}
            </span>
          </div>

          <table className="table table-bordered text-center text-nowrap table-responsive my-4">
            <tbody>
              <tr>
                <td colSpan="1">
                  <strong>Status</strong>
                </td>
                <td colSpan="1">
                  <strong>Active</strong>
                </td>
                <td colSpan="1">
                  <strong>In-Progress</strong>
                </td>
                <td colSpan="1">
                  <strong>On Hold</strong>
                </td>
                <td>
                  <strong>In-Active</strong>
                </td>
                <td>
                  <strong>Completed</strong>
                </td>
              </tr>
              <tr>
                <td>
                  <strong>Projects</strong>
                </td>
                <td>
                  <strong>{data?.activeProjects}</strong>
                </td>
                <td>
                  <strong>{data?.inProgressProjects}</strong>
                </td>
                <td>
                  <strong>{data?.onHoldProjects}</strong>
                </td>
                <td>
                  <strong>{data?.inActiveProjects}</strong>
                </td>
                <td>
                  <strong>{data?.completedProjects}</strong>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div className="row">
          <div className="col-12 col-md-6 d-flex align-items-center">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">Activite Employees:</span>
            <span className="ms-2">{data?.activeEmployees}</span>
          </div>

          <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
            <i className="bx bx-sm bx-group me-1"></i>
            <span className="fw-semibold">In-Active Employee:</span>
            <span className="ms-2">{data?.inActiveEmployees}</span>
          </div>
        </div>
      </div>
    </>
  );
};

export default Profile;