@use 'sass:color';
@use 'sass:map';

@use '../svelte-components/css-var' as *;
@use '../svelte-components/utils' as *;
@use '../svelte-components/theme';
@use '../svelte-components/conversion' as *;

@function -g($map, $key, $keys...) {
  @return map-get-req($map, $key, $keys...);
}

@function generate-dark-theme($branding) {
  // see https://github.com/prettier/prettier/issues/15369:
  // prettier-ignore
  @return (
    app: (
      // Scrollbar
      scrollbar-thumb: rgba(#000000, 26%),
      scrollbar-thumb--hover: rgba(#000000, 54%),
      // Global
      background-lightness--hover: -12%,
      background-lightness--active: -38%,
      text-e1: theme.$dark-text-e1,
      text-e2: theme.$dark-text-e2,
      text-e3: theme.$dark-text-e3,
      text-anchor: theme.$work-blue-600,
      primary-text-anchor: -g($branding, primary-color-600),
      success: #8BC34A,
      // Main panels
      panel-gap: color.scale(theme.$dark-background, $lightness: +10.5%),
      nav-background: color.scale(theme.$dark-background, $lightness: -12%),
      main-background: theme.$dark-background,
      aside-background: theme.$dark-background,
      pairing-background: #000000,
      main-welcome-icon-color: rgb(37, 37, 37),
    ),
    individual-components: (
      // List Element
      list-element-background-color--hover: rgba(#000000, 12%),
      list-element-color: rgba(#ffffff, 54%),
      // Divider
      divider-background-color: rgba(#000000, 38%),
      // ContactNavigationContext Button
      contact-navigation-context-button-border-color--hover: rgba(#000000, 12%),
      contact-navigation-context-button-background-color--hover: rgba(#000000, 12%),
      contact-navigation-context-button-border-color--focus: #ffffff,
      contact-navigation-context-button-background-color--focus: rgba(#000000, 12%),
      contact-navigation-context-button-color--active: theme.$primary-text-e1,
      contact-navigation-context-button-opacity--disabled: 38%,
      // Tooltip
      tooltip-background-color: color.scale(theme.$dark-background, $lightness: -68%),
      tooltip-color: #ffffff,
      tooltip-box-shadow: (
        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px,
        rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px,
        rgba(0, 0, 0, 0.04) 0px 2px 2px -1px,
        rgba(0, 0, 0, 0.04) 0px 3px 3px -1.5px,
        rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px,
        rgba(0, 0, 0, 0.24) 0px 10px 10px -5px,
        rgba(0, 0, 0, 0.24) 0px 24px 24px -8px
      ),
      tooltip-chevron-drop-shadow-filter: (
        drop-shadow(0 rem(3px) rem(3px) rgba(0, 0, 0, 0.25)) 
        drop-shadow(0 rem(24px) rem(24px) rgba(0, 0, 0, 0.125))
      ),
    ),
    message-components: (
      // Message footer
      message-indicator-label: rgb(170, 170, 170),
      // Message status
      message-status-acknowledged: theme.$consumer-green-600,
      message-status-declined: theme.$warning-orange,
      message-status-error: theme.$alert-red,

      // General message container
      message-hover-background-color: rgba(#000000, 12%),
      message-background-color-incoming: mix(theme.$light-background, theme.$dark-background, 12%),
      message-background-color-incoming-nav: mix(theme.$light-background, theme.$dark-background, 12%),
      message-background-color-outgoing: mix(theme.$light-background, theme.$dark-background, 6%),
      message-background-color-outgoing-nav: mix(theme.$light-background, theme.$dark-background, 6%),
      message-highlight-overlay-color: rgba(255, 255, 255, 0.125),
      message-badge-color: rgba(#ffffff, 88%),
      message-badge-background-color: rgba(#000000, 72%),
      message-overlay-background-color: rgba(#000000, 62%),
      message-overlay-button-color: rgba(#ffffff, 88%),
      message-overlay-button-background-color: rgba(#000000, 72%),
      message-overlay-button-background-color--hover: rgba(#000000, 78%),
      message-overlay-button-background-color--focus: rgba(#000000, 78%),
      message-overlay-button-background-color--active: rgba(#000000, 92%),
      message-mention-background-color: rgba(#000000, 26%),
      message-mention-color: rgba(#ffffff, 88%),
      message-mention-me-background-color: -g($branding, primary-color-600),
      message-mention-me-color: #ffffff,
      message-quote-text-color: rgb(170, 170, 170),
      message-quote-background-color--hover: rgba(255, 255, 255, 0.03),
      // File Message
      message-file-icon-background-image: url('/res/theme/dark/icon/file.svg'),
      message-file-icon-width: em(32px),
      message-file-icon-height: em(40px),
      message-file-info-column-gap: em(8px),
      message-file-info-row-gap: em(2px),
      message-file-icon-font-size: em(8px),
      message-file-icon-font-color: theme.$dark-text-e1,
      message-file-size-color: theme.$dark-text-e2,

      // Image message
      message-image-placeholder-background-color: rgba(#000000, 12%),

      // Status Message
      status-message-background-color: theme.$grey-800
    ),
    compound-components: (
      // Profile picture upload
      profile-picture-upload-background-color: rgba(#ffffff, 4%),
      // Profile picture overlay
      profile-picture-overlay-unread-text: theme.$primary-text-e1,
      profile-picture-overlay-badge-size: rem(20px),
      profile-picture-overlay-badge-icon-size: rem(12px),
      profile-picture-overlay-badge-icon: theme.$dark-text-e2,
      profile-picture-overlay-badge-icon-consumer: theme.$consumer-green-600,
      profile-picture-overlay-badge-icon-work: theme.$work-blue-800,
      // ProfilePictureButton
      profile-picture-button-background-color: color.scale(theme.$dark-background, $lightness: -32%),
      profile-picture-button-box-shadow-color: none,
      profile-picture-button-box-shadow-color--hover: 0px 8px 18px rgba(0, 0, 0, 0.12),
      profile-picture-button-counter-background-color: rgba(-g($branding, primary-color-900), 25%),
      profile-picture-button-counter-text-color: -g($branding, primary-color-600),
      // Conversation
      conversation-header-background-color: rgba(theme.$dark-background, 0.85),
      conversation-message-options-caret-color: rgba(#ffffff, 88%),
      // Conversation preview
      conversation-preview-draft-text: theme.$alert-red,
      conversation-preview-properties-background:
        color.scale(theme.$dark-background, $lightness: -28%),
      conversation-preview-properties-call-background-color: -g($branding, primary-color-500),
      conversation-preview-properties-call-background-color--hover: -g($branding, primary-color-600),
      conversation-preview-properties-call-text-color: #ffffff,
      conversation-preview-properties-call-joined-background-color: -g($branding, primary-color-500),
      conversation-preview-properties-call-joined-text-color: #ffffff,
      conversation-preview-properties-icon: theme.$dark-text-e2,
      conversation-preview-properties-icon-pin: theme.$pin-yellow,
      conversation-preview-message-text: theme.$dark-text-e2,
      conversation-preview-status-text: theme.$dark-text-e2,
      conversation-preview-swipe-area-gap-lightness: -12%,
      // Chat view
      chat-scroll-to-bottom-button-color: #f1f1f1,
      chat-scroll-to-bottom-button-background-color: #131313,
      chat-scroll-to-bottom-button-background-color--hover: #101010,
      chat-scroll-to-bottom-button-background-color--focus: #101010,
      chat-scroll-to-bottom-button-background-color--active: #060606,
      // Contact details
      contact-details-badge-consumer-text: rgba(#ffffff, 0.88),
      contact-details-badge-consumer-background: theme.$consumer-green-600,
      contact-details-badge-work-text: rgba(#ffffff, 0.88),
      contact-details-badge-work-background: theme.$work-blue-800,
      // Receiver
      contact-status-tag-background: rgba(#ffffff, 88%),
      contact-status-tag-text: theme.$light-text-e1,
      // Search input
      search-input-background: rgba(#ffffff, 4%),
      search-input-background--focus: rgba(#000000, 38%),
      // Icon text
      menu-item-icon-text-background-color--hover: rgba(#000000, 12%),
      menu-item-icon-text-background-color--active: rgba(#000000, 38%),
      // Compose area
      compose-area-placeholder-text: theme.$dark-text-e2,
      compose-area-padding: rem(10px) rem(8px) 0 rem(8px),
      compose-area-margin: rem(8px),
      compose-area-quote-background: rgba(#000000, 12%),
      // Compose bar
      compose-bar-bytes-count-exceeded-color: theme.$alert-red,
      // Emoji picker
      emoji-picker-tab-button-background-color--hover: rgba(#000000, 88%),
      emoji-picker-tab-button-color: theme.$dark-text-e1,
      emoji-picker-tab-button-color--active: -g($branding, primary-color-500),
      emoji-picker-emoji-button-background-color--hover: #303030,
      emoji-picker-emoji-button-background-color--focus: #303030,
      emoji-picker-emoji-button-background-color--active: #5b5b5b,
      emoji-picker-emoji-button-border-color--focus: #ffffff,
      emoji-picker-customizer-background-color: theme.$dark-background,
      emoji-picker-customizer-box-shadow: (
        0 rem(2px) rem(3px) rgba(0, 0, 0, 0.25), 
        0 rem(3px) rem(24px) rgba(0, 0, 0, 0.25)
      ),
      emoji-picker-customizer-handle-box-shadow: (
        0 rem(3px) rem(3px) rgba(0, 0, 0, 0.25), 
        0 rem(24px) rem(24px) rgba(0, 0, 0, 0.125)
      ),
      // Emoji Picker
      emoji-picker-popover-background-color: color.scale(theme.$dark-background, $lightness: -68%, $alpha: -10%),
      emoji-picker-popover-box-shadow--hidden: rgba(0, 0, 0, 0) 0px 0px 0px,
      emoji-picker-popover-box-shadow--visible: (
        rgba(0, 0, 0, 0.06) 0px 0px 0px 1px,
        rgba(0, 0, 0, 0.03) 0px 1px 1px -0.5px,
        rgba(0, 0, 0, 0.04) 0px 2px 2px -1px,
        rgba(0, 0, 0, 0.04) 0px 3px 3px -1.5px,
        rgba(0, 0, 0, 0.03) 0px 5px 5px -2.5px,
        rgba(0, 0, 0, 0.24) 0px 10px 10px -5px,
        rgba(0, 0, 0, 0.24) 0px 24px 24px -8px
      ),
      // Emoji reactions strip
      emoji-reactions-strip-bucket-background-color: color.scale(theme.$dark-background, $lightness: 12%),
      emoji-reactions-strip-bucket-background-color--active: color.scale(theme.$dark-background, $lightness: 24%),
      emoji-reactions-strip-bucket-background-color--active--hover: color.scale(theme.$dark-background, $lightness: 28%),
      emoji-reactions-strip-bucket-color: theme.$primary-text-e1,
      emoji-reactions-strip-bucket-border-color: theme.$dark-background,
      emoji-reactions-strip-bucket-border-color--hover: theme.$dark-background,
      emoji-reactions-strip-bucket-border-color--active: theme.$dark-background,
      // Emoji reactions favorite box
      emoji-reactions-favorite-box-item-background-color--hover: color.scale(theme.$dark-background, $lightness: 12%),
      emoji-reactions-favorite-box-item-background-color--active: color.scale(theme.$dark-background, $lightness: 16%),
      emoji-reactions-favorite-box-item-background-color--active--hover: color.scale(theme.$dark-background, $lightness: 24%),
      emoji-reactions-favorite-box-item-opacity--disabled: 0.25,
      // Modal dialog
      modal-dialog-background-color-rgb-triplet: (0, 0, 0),
      modal-dialog-background-color: rgba(0, 0, 0, 85%),
      // MediaMessage Modal
      media-message-background-color: theme.$grey-900,
      media-message-active-file-chip-background-color: rgba(#ffffff, 54%),
      media-message-active-file-chip-text-color: theme.$light-text-e2,
      media-message-file-type-text-color: theme.$dark-text-e1,
      media-message-file-type-background-image: url('/res/theme/dark/icon/file.svg'),
      media-message-active-file-options-background-color: rgba(#000000, 54%),
      media-message-active-file-options-text-color: #ffffff,
      media-message-miniatures-background-color: rgba(#ffffff, 12%),
      media-message-miniatures-text-color: theme.$dark-text-e1,
      // Linking Wizard
      linking-wizard-error-message-background: theme.$grey-900,
      // Call Activity Sidebar
      call-sidebar-title-color: theme.$dark-text-e1,
      call-sidebar--expanded-title-color: theme.$dark-text-e1,
      call-sidebar-subtitle-color: theme.$dark-text-e2,
      call-sidebar--expanded-subtitle-color: theme.$dark-text-e2,
      call-sidebar-action-icon-color: theme.$dark-text-e1,
      call-sidebar--expanded-action-icon-color: theme.$dark-text-e1,
      // Logo
      logo-progress-bar-fill-color: -g($branding, primary-color-600),
    ),
    debug-components: (
      // Top bar
      top-bar-background-color: color.scale(theme.$dark-background, $lightness: -24%),
    )
  );
}
