import React, { useState } from 'react';
import { F as FlippyCard } from './FlippyCard-458dc9b1.js';
import FatArrow from './icon.green.fat-arrow.png';
import { U as UserProfilePicture } from './UserProfilePicture-7b950437.js';
import { b as VCVerificationCheckWithText } from './VCVerificationCheck-8b8b7a76.js';
import { h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-30058000.js';
import { V as VCDisplayBackFace } from './VCDisplayBackFace-eeaa642e.js';

const VCDisplayFrontFace = ({
  title,
  createdAt,
  issuer,
  issuee,
  subjectImageComponent,
  issuerImageComponent,
  hideProfileBubbles = false,
  credentialSubject,
  className = "",
  loading,
  handleClick,
  overrideCardImageComponent,
  overrideCardTitle,
  customHeaderComponent
}) => {
  var _a, _b, _c, _d;
  const credentialAchievementImage = ((_b = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.image) == null ? void 0 : _b.id) || ((_c = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _c.image);
  const issuerName = getNameFromProfile(issuer != null ? issuer : "");
  const issueeName = getNameFromProfile(issuee != null ? issuee : "");
  const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
  const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
  let issueeImageEl = null;
  if (subjectImageComponent) {
    issueeImageEl = subjectImageComponent;
  } else {
    issueeImageEl = /* @__PURE__ */ React.createElement(
      UserProfilePicture,
      {
        customContainerClass: `object-cover h-full w-full text-4xl ${!issueeImage ? "pt-[8px]" : ""}`,
        user: { image: issueeImage, name: issueeName },
        alt: "Issuee image"
      }
    );
  }
  let issuerImageEl = null;
  if (issuerImageComponent) {
    issuerImageEl = issuerImageComponent;
  } else {
    issuerImageEl = /* @__PURE__ */ React.createElement(
      UserProfilePicture,
      {
        customContainerClass: `object-cover h-full w-full text-4xl ${!issuerImage ? "pt-[8px]" : ""}`,
        user: { image: issuerImage, name: issuerName },
        alt: "Issuer image"
      }
    );
  }
  const credImg = credentialAchievementImage ? /* @__PURE__ */ React.createElement(
    "img",
    {
      className: "h-full w-full object-cover",
      src: credentialAchievementImage != null ? credentialAchievementImage : "",
      alt: "Credential Achievement Image"
    }
  ) : /* @__PURE__ */ React.createElement(React.Fragment, null);
  const renderCardImg = overrideCardImageComponent ? overrideCardImageComponent : credImg;
  const cardTitle = overrideCardTitle ? overrideCardTitle : title;
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: `z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
    },
    /* @__PURE__ */ React.createElement("section", { className: "bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]" }),
    /* @__PURE__ */ React.createElement("section", { className: "flex flex-col items-center justify-center z-10 text-center credential-thumb-img" }, /* @__PURE__ */ React.createElement("section", { className: "max-w-[100px] max-h-[100px]" }, renderCardImg), /* @__PURE__ */ React.createElement("section", { className: "flex flex-row  w-full line-clamp-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-row w-full line-clamp-2 py-4 vc-flippy-card-title-front " }, /* @__PURE__ */ React.createElement(
      "h3",
      {
        className: "vc-thumbnail-title w-full text-2xl line-clamp-2 tracking-wide leading-snug text-center vc-display-title text-gray-900 font-medium",
        "data-testid": "vc-thumbnail-title"
      },
      cardTitle != null ? cardTitle : ""
    )), customHeaderComponent && customHeaderComponent), /* @__PURE__ */ React.createElement("section", { className: "flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs" }, !hideProfileBubbles && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white" }, issuerImageEl), /* @__PURE__ */ React.createElement(
      "img",
      {
        className: "h-8 w-8 my-0 mx-4",
        src: (_d = FatArrow) != null ? _d : "",
        alt: "fat arrow icon"
      }
    ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white" }, issueeImageEl))), /* @__PURE__ */ React.createElement("div", { className: "w-full mt-2 vc-card-issued-to-info" }, /* @__PURE__ */ React.createElement(
      "p",
      {
        className: "text-sm font-light text-center line-clamp-2 vc-display-issue-details text-gray-900",
        "data-testid": "vc-thumbnail-createdAt"
      },
      "Issued to ",
      /* @__PURE__ */ React.createElement("span", { className: "font-bold text-gray-900" }, issueeName),
      " on",
      " ",
      createdAt != null ? createdAt : "",
      " by",
      " ",
      /* @__PURE__ */ React.createElement("span", { className: "font-bold text-gray-900" }, " ", issuerName)
    )), /* @__PURE__ */ React.createElement(
      "button",
      {
        onClick: handleClick,
        className: "cursor-alias bg-white my-3 border-0 text-indigo-500 font-semibold py-2 px-4 sl"
      },
      /* @__PURE__ */ React.createElement("span", { className: "flex justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "flex items-center" }, "View Details"))
    )),
    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center w-full" }, /* @__PURE__ */ React.createElement(VCVerificationCheckWithText, { loading }))
  );
};

const FRONT_FACE = "front";
const BACK_FACE = "back";
const VCDisplayCard = ({
  credential,
  issueeOverride,
  issuerOverride,
  className = "",
  loading = false,
  verification = [],
  hideProfileBubbles = false,
  subjectImageComponent,
  issuerImageComponent,
  overrideDetailsComponent,
  overrideCardTitle,
  overrideCardImageComponent,
  customHeaderComponent
}) => {
  const [flipState, setFlipState] = useState(FRONT_FACE);
  const {
    title,
    createdAt,
    issuer: _issuer,
    issuee: _issuee,
    credentialSubject
  } = getInfoFromCredential(credential);
  const issuee = issueeOverride || _issuee;
  const issuer = issuerOverride || _issuer;
  const handleFlip = () => {
    if (flipState === FRONT_FACE) {
      setFlipState(BACK_FACE);
    }
    if (flipState === BACK_FACE) {
      setFlipState(FRONT_FACE);
    }
  };
  return /* @__PURE__ */ React.createElement(FlippyCard, { flipState }, /* @__PURE__ */ React.createElement(
    VCDisplayFrontFace,
    {
      title,
      credentialSubject,
      customHeaderComponent,
      issuer,
      issuee,
      subjectImageComponent,
      issuerImageComponent,
      overrideCardImageComponent,
      overrideCardTitle,
      hideProfileBubbles,
      createdAt,
      className,
      loading,
      handleClick: handleFlip
    }
  ), /* @__PURE__ */ React.createElement(
    VCDisplayBackFace,
    {
      title,
      credentialSubject,
      overrideDetailsComponent,
      issuer,
      issuee,
      createdAt,
      className,
      loading,
      verification,
      handleClick: handleFlip
    }
  ));
};

export { VCDisplayCard as V };
//# sourceMappingURL=VCDisplayCard-fb1b7706.js.map
