// helpers
import { getFirstCharacters, truncateText } from "helpers/string.helper";
// types
import { IWorkspaceMemberInvitation } from "types";

type Props = {
  invitation: IWorkspaceMemberInvitation;
  invitationsRespond: string[];
  handleInvitation: any;
};

const SingleInvitation: React.FC<Props> = ({ invitation, invitationsRespond, handleInvitation }) => (
  <li>
    <label
      className={`group relative flex cursor-pointer items-start space-x-3 border-2 border-transparent py-4`}
      htmlFor={invitation.id}
    >
      <div className="flex-shrink-0">
        <span className="inline-flex h-10 w-10 items-center justify-center rounded-lg">
          {invitation.workspace.logo && invitation.workspace.logo !== "" ? (
            <img
              src={invitation.workspace.logo}
              height="100%"
              width="100%"
              className="rounded"
              alt={invitation.workspace.name}
            />
          ) : (
            <span className="flex h-full w-full items-center justify-center rounded-xl bg-gray-700 p-4 uppercase text-white">
              {getFirstCharacters(invitation.workspace.name)}
            </span>
          )}
        </span>
      </div>
      <div className="min-w-0 flex-1">
        <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
        <p className="text-sm text-custom-text-200">
          Invited by{" "}
          {invitation.created_by_detail
            ? invitation.created_by_detail.display_name
            : invitation.workspace.owner.display_name}
        </p>
      </div>
      <div className="flex-shrink-0 self-center">
        <button
          className={`${
            invitationsRespond.includes(invitation.id)
              ? "bg-custom-background-80 text-custom-text-200"
              : "bg-custom-primary text-white"
          } text-sm px-4 py-2 border border-custom-border-200 rounded-3xl`}
          onClick={() => {
            handleInvitation(invitation, invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted");
          }}
        >
          {invitationsRespond.includes(invitation.id) ? "Invitation Accepted" : "Accept Invitation"}
        </button>
      </div>
    </label>
  </li>
);

export default SingleInvitation;