import React, { useState } from "react";
import PropTypes from "prop-types";
import {
  BlockIcon,
  BlockIconContainer,
  BlockLabelIcon,
  ButtonsContainer,
  CheckButton,
  EditButton,
  EditIcon,
  ProfileCardContainer,
  ProfileCardWrapper,
  ProfileInfoContainer,
  RemoveIcon,
  RemoveIconContainer,
} from "./BigProfileCard.styled";
import ProfileMainInfo from "../ProfileMainInfo/ProfileMainInfo";
import ProfileContact from "../ProfileContact/ProfileContact";
import EditProfile from "../EditProfile/EditProfile";
import selectedTheme from "../../../../themes";
import { useTranslation } from "react-i18next";
import history from "../../../../store/utils/history";
import { replaceInRoute } from "../../../../util/helpers/routeHelpers";
import { ADMIN_SINGLE_USER_PAGE } from "../../../../constants/pages";
import DeleteCategory from "../../../Modals/DeleteCategory/DeleteCategory";
import UserLabeledCard from "../../LabeledCard/User/UserLabeledCard";

const BigProfileCard = (props) => {
  const { t } = useTranslation();
  const [editProfileModal, setEditProfileModal] = useState(false);
  const [deleteOrEditModal, setDeleteOrEditModal] = useState({
    show: false,
    type: "",
  });
  const closeModalHandler = () => {
    if (editProfileModal) setEditProfileModal(false);
    else setDeleteOrEditModal({ show: false, type: "" });
  };
  const removeUser = () => {
    setDeleteOrEditModal({
      show: true,
      type: "deleteUser",
    });
  };
  console.log(props.profile);
  const blockUser = () => {
    setDeleteOrEditModal({
      show: true,
      type: "blockUser",
    });
  };
  const goToUser = () => {
    history.push(
      replaceInRoute(ADMIN_SINGLE_USER_PAGE, {
        idProfile: props.profile?._id,
      })
    );
  };
  return (
    <>
      <ProfileCardContainer halfwidth={props.halfwidth}>
        <ProfileCardWrapper variant="outlined">
          <ButtonsContainer>
            <EditButton onClick={() => setEditProfileModal(true)}>
              <EditIcon />
            </EditButton>
            <RemoveIconContainer onClick={removeUser}>
              <RemoveIcon />
            </RemoveIconContainer>
            <BlockIconContainer onClick={blockUser}>
              <BlockIcon />
            </BlockIconContainer>
          </ButtonsContainer>
          <ProfileInfoContainer>
            {/* Profile Main Info  */}
            <ProfileMainInfo profile={props.profile} isAdmin />
            {/* Profile Contact */}
            <ProfileContact profile={props.profile} isAdmin />
          </ProfileInfoContainer>
          <CheckButton
            halfwidth={props.halfwidth}
            variant={"outlined"}
            buttoncolor={selectedTheme.colors.primaryPurple}
            textcolor={selectedTheme.colors.primaryPurple}
            style={{ fontWeight: "600" }}
            onClick={goToUser}
          >
            {t("admin.users.checkProfile")}
          </CheckButton>
        </ProfileCardWrapper>
      </ProfileCardContainer>
      {editProfileModal && (
        <EditProfile
          profile={props.profile}
          closeModalHandler={closeModalHandler}
          reFetchProfile={() => {}}
          isAdmin
          userId={props.profile._id}
        />
      )}
      {deleteOrEditModal.show && (
        <DeleteCategory
          customId={props.profile._id}
          setOpenedDeleteModal={closeModalHandler}
          type={deleteOrEditModal.type}
          customLabeledCard={<UserLabeledCard user={props.profile} />}
          customLabeledCardHeight="90px"
          customLabeledCardIcon={
            deleteOrEditModal.type === "blockUser" && <BlockLabelIcon />
          }
        />
      )}
    </>
  );
};

BigProfileCard.propTypes = {
  profile: PropTypes.any,
  halfwidth: PropTypes.bool,
};

export default BigProfileCard;