import { css } from "@emotion/css";
import { html, nothing } from "lit";

import { Theme } from "@bitwarden/common/platform/enums";

import { EventSecurity } from "../../../../utils/event-security";
import { spacing, themes, typography } from "../../constants/styles";

export type NotificationConfirmationMessageProps = {
  buttonAria?: string;
  buttonText?: string;
  itemName?: string;
  message?: string;
  messageDetails?: string;
  handleClick: (e: Event) => void;
  theme: Theme;
};

export function NotificationConfirmationMessage({
  buttonAria,
  buttonText,
  itemName,
  message,
  messageDetails,
  handleClick,
  theme,
}: NotificationConfirmationMessageProps) {
  return html`
    <div class=${containerStyles}>
      ${
        message || buttonText
          ? html`
              <div class=${singleLineWrapperStyles}>
                ${
                  itemName
                    ? html`
                        <span class=${itemNameStyles(theme)} title=${itemName}> ${itemName} </span>
                      `
                    : nothing
                }
                <span
                  title=${message || buttonText}
                  class=${notificationConfirmationMessageStyles(theme)}
                >
                  ${message || nothing}
                  ${
                    buttonText
                      ? html`
                          <a
                            title=${buttonText}
                            class=${notificationConfirmationButtonTextStyles(theme)}
                            @click=${handleClick}
                            @keydown=${(e: KeyboardEvent) =>
                              handleButtonKeyDown(e, () => handleClick(e))}
                            aria-label=${buttonAria}
                            tabindex="0"
                            role="button"
                          >
                            ${buttonText}
                          </a>
                        `
                      : nothing
                  }
                </span>
              </div>
            `
          : nothing
      }
      ${
        messageDetails
          ? html`<div class=${AdditionalMessageStyles({ theme })}>${messageDetails}</div>`
          : nothing
      }
    </div>
  `;
}

const containerStyles = css`
  display: flex;
  flex-direction: column;
  gap: ${spacing[1]};
  width: 100%;
`;

const singleLineWrapperStyles = css`
  display: inline;
  white-space: normal;
  word-break: break-word;
`;

const baseTextStyles = css`
  overflow-x: hidden;
  text-align: left;
  text-overflow: ellipsis;
  line-height: 24px;
  font-family: Inter, sans-serif;
  font-size: 16px;
`;

const notificationConfirmationMessageStyles = (theme: Theme) => css`
  ${baseTextStyles}

  color: ${themes[theme].text.main};
  font-weight: 400;
  white-space: normal;
  word-break: break-word;
  display: inline;
`;

const itemNameStyles = (theme: Theme) => css`
  ${baseTextStyles}

  color: ${themes[theme].text.main};
  font-weight: 400;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
`;

const notificationConfirmationButtonTextStyles = (theme: Theme) => css`
  ${baseTextStyles}

  color: ${themes[theme].primary[600]};
  font-weight: 500;
  cursor: pointer;
`;

const AdditionalMessageStyles = ({ theme }: { theme: Theme }) => css`
  ${typography.body2}

  font-size: 14px;
  color: ${themes[theme].text.muted};
`;

function handleButtonKeyDown(event: KeyboardEvent, handleClick: () => void) {
  if (EventSecurity.isEventTrusted(event) && (event.key === "Enter" || event.key === " ")) {
    event.preventDefault();
    handleClick();
  }
}
