import React, { useState, useEffect } from "react";

import { useChangePassword } from "../../components/Context/ChangePasswordContext";
import GlobalModel from "../common/GlobalModel";
import ManageEmployee from "./ManageEmployee";

const EmpBanner = ({ profile, loggedInUser }) => {
  const { openChangePassword } = useChangePassword();
  const [showModal, setShowModal] = useState(false);

  return (
    <>
      {showModal && (
        <GlobalModel
          size="lg"
          isOpen={showModal}
          closeModal={() => setShowModal(false)}
        >
          <ManageEmployee
            employeeId={profile.id}
            onClosed={() => setShowModal(false)}
          />
        </GlobalModel>
      )}
      <div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
        <div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
          {profile?.gender?.toLowerCase() == "male" && (
            <img
              width={125}
              src="../../assets/img/avatars/avatar_m_01.png"
              alt="user image"
              className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
            />
          )}
          {profile?.gender?.toLowerCase() == "female" && (
            <img
              width={125}
              src="../../assets/img/avatars/avatar_f_02.png"
              alt="user image"
              className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
            />
          )}
        </div>
        <div className="flex-grow-1 mt-1 mt-lg-1">
          <div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
            <div className="user-profile-info">
              <h4 className="mb-2">
                <span>{profile?.firstName}</span>
                {profile?.middleName ? (
                  <span className="ms-1">{profile?.middleName}</span>
                ) : (
                  <></>
                )}
                {profile?.lastName ? (
                  <span className="ms-1">{profile?.lastName}</span>
                ) : (
                  <></>
                )}
              </h4>
              <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
                <li className="list-inline-item">
                  <i className="icon-base bx bx-crown me-1 align-top"></i>
                  <span className="fw-medium">
                    {profile?.jobRole || <em>NA</em>}
                  </span>
                </li>
                <li className="list-inline-item">
                  <i className="icon-base bx bx-phone me-0 align-top"></i>
                  <span className="fw-medium">
                    {" "}
                    {profile?.phoneNumber || <em>NA</em>}
                  </span>
                </li>
                <li className="list-inline-item">
                  <i className="icon-base bx bx-calendar me-0 align-top"></i>
                  <span className="fw-medium">
                    {" "}
                    Joined on{" "}
                    {profile?.joiningDate ? (
                      new Date(profile.joiningDate).toLocaleDateString()
                    ) : (
                      <em>NA</em>
                    )}
                  </span>
                </li>
              </ul>
              <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
                <li className="list-inline-item">
                  <button
                    className="btn btn-sm btn-primary btn-block"
                    onClick={() => setShowModal(true)}
                  >
                    Edit Profile
                  </button>
                </li>
                <li className="list-inline-item">
                  {profile?.id == loggedInUser?.employeeInfo?.id && (
                    <button
                      className="btn  btn-sm btn-outline-primary btn-block"
                      onClick={() => openChangePassword()}
                    >
                      Change Password
                    </button>
                  )}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default EmpBanner;