@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-light-theme($branding) {
  // see https://github.com/prettier/prettier/issues/15369:
  // prettier-ignore
  @return (
    app: (
      primary-background: -g($branding, primary-color-700),
      primary-background--hover: -g($branding, primary-color-800),
      primary-background--active: -g($branding, primary-color-800),
      primary-outline--focus: #ffffff,
      primary-text-e1: theme.$primary-text-e1,
      primary-text-e2: theme.$primary-text-e2,
      primary-text-e3: theme.$primary-text-e3,
      // Scrollbar
      scrollbar-thumb: rgba(#000000, 12%),
      scrollbar-thumb--hover: rgba(#000000, 26%),
      // Global
      background-lightness--hover: -4%,
      background-lightness--active: -8%,
      text-e1: theme.$light-text-e1,
      text-e2: theme.$light-text-e2,
      text-e3: theme.$light-text-e2,
      text-anchor: map.get(map.get(theme.$brandings, work), primary-color-800),
      primary-text-anchor: -g($branding, primary-color-800),
      success: #8BC34A,
      // Main panels
      panel-gap: theme.$grey-200,
      nav-background: theme.$grey-100,
      main-background: theme.$light-background,
      aside-background: theme.$light-background,
      pairing-background: #ffffff,
      main-welcome-icon-color: rgb(240, 240, 240)
    ),
    individual-components: (
      // List Elements
      list-element-background-color--hover: rgba(#000000, 4%),
      list-element-color: rgba(#000000, 88%),
      // Divider
      divider-background-color: rgba(#000000, 12%),
      // ContactNavigationContext Button
      contact-navigation-context-button-color: -g($branding, primary-color-700),
      contact-navigation-context-button-border-color--hover: rgba(#000000, 4%),
      contact-navigation-context-button-background-color--hover: rgba(#000000, 4%),
      contact-navigation-context-button-border-color--focus: #000000,
      contact-navigation-context-button-background-color--focus: rgba(#000000, 4%),
      contact-navigation-context-button-color--active: theme.$primary-text-e1,
      contact-navigation-context-button-border-color--active: -g($branding, primary-color-700),
      contact-navigation-context-button-background-color--active: -g($branding, primary-color-700),
      contact-navigation-context-button-opacity--disabled: 26%,
      // Tooltip
      tooltip-background-color: #ffffff,
      tooltip-color: theme.$grey-900,
      tooltip-box-shadow: (
        rgba(63, 63, 63, 0.25) 0px 4px 8px -2px, rgba(66, 22, 9, 0.08) 0px 0px 0px 1px
      ),
      tooltip-chevron-drop-shadow-filter: (
        drop-shadow(0px 13px 11px rgba(24, 29, 37, 0.075))
        drop-shadow(0px 5px 3px rgba(24, 29, 37, 0.075))
        drop-shadow(0px 3px 1px rgba(31, 27, 25, 0.1))
      ),
    ),
    message-components: (
      // Message footer
      message-indicator-label: rgb(120, 120, 120),
      // Message status
      message-status-acknowledged: map.get(map.get(theme.$brandings, consumer), primary-color-600),
      message-status-declined: theme.$warning-orange,
      message-status-error: theme.$alert-red,

      // General message container
      message-hover-background-color: rgba(#000000, 4%),
      message-background-color-incoming: theme.$grey-100,
      message-background-color-incoming-nav: theme.$grey-200,
      message-background-color-outgoing: if(
        -g($branding, primary-color-50) == map.get(map.get(theme.$brandings, consumer), primary-color-50),
        -g($branding, primary-color-100),
        -g($branding, primary-color-50)
      ),
      message-background-color-outgoing-nav: -g($branding, primary-color-100),
      message-highlight-overlay-color: rgba(0, 0, 0, 0.25),
      message-badge-color: rgb(71, 71, 71),
      message-badge-background-color: rgba(#ffffff, 74%),
      message-overlay-background-color: rgba(#000000, 38%),
      message-overlay-button-color: theme.$light-text-e1,
      message-overlay-button-background-color: rgba(#ffffff, 72%),
      message-overlay-button-background-color--hover: rgba(#ffffff, 78%),
      message-overlay-button-background-color--focus: rgba(#ffffff, 78%),
      message-overlay-button-background-color--active: rgba(#ffffff, 92%),
      message-mention-background-color: rgba(#000000, 12%),
      message-mention-color: rgba(#000000, 88%),
      message-mention-me-background-color: -g($branding, primary-color-600),
      message-mention-me-color: #ffffff,
      message-quote-text-color: rgb(120, 120, 120),
      message-quote-background-color--hover: rgba(0, 0, 0, 0.03),

      // Poll message
      message-poll-choice-color--disabled: theme.$grey-600,
      message-poll-track-color--disabled: theme.$grey-600,

      // File Message
      message-file-icon-background-image: url('/res/theme/light/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.$light-text-e1,
      message-file-size-color: theme.$light-text-e2,

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

      // Status Message
      status-message-background-color: theme.$grey-50
    ),
    compound-components: (
      // Profile picture upload
      profile-picture-upload-background-color: rgba(#000000, 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.$light-text-e2,
      profile-picture-overlay-badge-icon-consumer: map.get(map.get(theme.$brandings, consumer), primary-color-700),
      profile-picture-overlay-badge-icon-work: map.get(map.get(theme.$brandings, work), primary-color-700),
      // ProfilePictureButton
      profile-picture-button-background-color: theme.$light-background,
      profile-picture-button-box-shadow-color: (0px 5px 12px rgba(3, 64, 23, 0.08), 0px 0px 3px rgba(3, 64, 23, 0.1)),
      profile-picture-button-box-shadow-color--hover: (0px 6px 18px rgba(3, 64, 23, 0.14), 0px 0px 3px rgba(3, 64, 23, 0.1)),
      profile-picture-button-counter-background-color: -g($branding, primary-color-50),
      profile-picture-button-counter-text-color: -g($branding, primary-color-700),
      profile-picture-button-text-color: -g($branding, primary-color-700),
      // Conversation
      conversation-header-background-color: rgba(#ffffff, 0.8),
      conversation-message-options-caret-color: rgba(#000000, 88%),
      // Conversation preview
      conversation-preview-draft-text: theme.$alert-red,
      conversation-preview-properties-background: theme.$light-background,
      conversation-preview-properties-call-background-color: -g($branding, primary-color-700),
      conversation-preview-properties-call-background-color--hover: -g($branding, primary-color-800),
      conversation-preview-properties-call-text-color: #ffffff,
      conversation-preview-properties-call-joined-background-color: -g($branding, primary-color-700),
      conversation-preview-properties-call-joined-text-color: #ffffff,
      conversation-preview-properties-icon: theme.$light-text-e2,
      conversation-preview-properties-icon-pin: theme.$pin-yellow,
      conversation-preview-message-text: theme.$light-text-e2,
      conversation-preview-status-text: theme.$light-text-e2,
      conversation-preview-swipe-area-gap-lightness: -12%,
      // Chat view
      chat-scroll-to-bottom-button-color: theme.$light-text-e1,
      chat-scroll-to-bottom-button-background-color: #ffffff,
      chat-scroll-to-bottom-button-background-color--hover: #f7f7f7,
      chat-scroll-to-bottom-button-background-color--focus: #f7f7f7,
      chat-scroll-to-bottom-button-background-color--active: #f1f1f1,
      // Contact details
      contact-details-badge-consumer-text: rgba(#ffffff, 0.88),
      contact-details-badge-consumer-background: map.get(map.get(theme.$brandings, consumer), primary-color-600),
      contact-details-badge-work-text: rgba(#ffffff, 0.88),
      contact-details-badge-work-background: map.get(map.get(theme.$brandings, work), primary-color-800),
      // Receiver
      contact-status-tag-background: rgba(#000000, 88%),
      contact-status-tag-text: theme.$dark-text-e1,
      // Search input
      search-input-background: rgba(#000000, 4%),
      search-input-background--focus: rgba(#000000, 12%),
      // Icon text
      menu-item-icon-text-background-color--hover: rgba(#000000, 4%),
      menu-item-icon-text-background-color--active: rgba(#000000, 8%),
      // Compose area
      compose-area-placeholder-text: theme.$light-text-e2,
      compose-area-padding: rem(10px) rem(8px) 0 rem(8px),
      compose-area-margin: rem(8px),
      compose-area-quote-background: theme.$grey-100,
      // Compose bar
      compose-bar-bytes-count-exceeded-color: theme.$alert-red,
      // Emoji picker
      emoji-picker-tab-button-background-color--hover: rgba(#000000, 8%),
      emoji-picker-tab-button-color: theme.$light-text-e1,
      emoji-picker-tab-button-color--active: -g($branding, primary-color-700),
      emoji-picker-emoji-button-background-color--hover: rgba(#000000, 4%),
      emoji-picker-emoji-button-background-color--focus: rgba(#000000, 4%),
      emoji-picker-emoji-button-background-color--active: rgba(#000000, 8%),
      emoji-picker-emoji-button-border-color--focus: #000000,
      emoji-picker-customizer-background-color: theme.$light-background,
      emoji-picker-customizer-box-shadow: (
        rgba(63, 63, 63, 0.25) 0px 4px 8px -2px, rgba(66, 22, 9, 0.08) 0px 0px 0px 1px
      ),
      emoji-picker-customizer-handle-box-shadow: (
        rgba(24, 29, 37, 0.075) 0px 12px 12px 0px,
        rgba(24, 29, 37, 0.075) 0px 4px 3px 0px,
        rgba(31, 27, 25, 0.20) 0px 1px 1px 0px
      ),
      // Emoji Picker
      emoji-picker-popover-background-color: rgba(255, 255, 255, 0.9),
      emoji-picker-popover-box-shadow--hidden: rgba(0, 0, 0, 0) 0px 0px 0px,
      emoji-picker-popover-box-shadow--visible: (
        rgba(92, 92, 92, 0.08) 0px 0px 0px 1px,
        rgba(68, 68, 68, 0.03) 0px 1px 1px -0.5px,
        rgba(68, 68, 68, 0.04) 0px 2px 2px -1px,
        rgba(68, 68, 68, 0.04) 0px 3px 3px -1.5px,
        rgba(68, 68, 68, 0.03) 0px 5px 5px -2.5px,
        rgba(68, 68, 68, 0.03) 0px 10px 10px -5px,
        rgba(57, 57, 57, 0.06) 0px 20px 24px -8px
      ),
      // Emoji reactions strip
      emoji-reactions-strip-bucket-background-color: #f7f7f7,
      emoji-reactions-strip-bucket-background-color--active: #dadada,
      emoji-reactions-strip-bucket-background-color--active--hover: #c4c4c4,
      emoji-reactions-strip-bucket-color: theme.$grey-700,
      emoji-reactions-strip-bucket-border-color: #e0e0e0,
      emoji-reactions-strip-bucket-border-color--hover: #c5c5c5,
      emoji-reactions-strip-bucket-border-color--active: theme.$light-background,
      // Emoji reactions favorite box
      emoji-reactions-favorite-box-item-background-color--hover: theme.$grey-200,
      emoji-reactions-favorite-box-item-background-color--active: theme.$grey-300,
      emoji-reactions-favorite-box-item-background-color--active--hover: theme.$grey-400,
      emoji-reactions-favorite-box-item-opacity--disabled: 0.25,
      // Modal dialog
      modal-dialog-background-color-rgb-triplet: (255, 255, 255),
      modal-dialog-background-color: rgba(255, 255, 255, 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.$light-text-e1,
      media-message-file-type-background-image: url('/res/theme/light/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(#000000, 6%),
      media-message-miniatures-text-color: theme.$light-text-e1,
      // Linking Wizard
      linking-wizard-error-message-background: theme.$grey-100,
      // Call Activity Sidebar
      call-sidebar-title-color: theme.$light-text-e1,
      call-sidebar--expanded-title-color: theme.$dark-text-e1,
      call-sidebar-subtitle-color: theme.$light-text-e2,
      call-sidebar--expanded-subtitle-color: theme.$dark-text-e2,
      call-sidebar-action-icon-color: theme.$light-text-e1,
      call-sidebar--expanded-action-icon-color: theme.$dark-text-e1,
      // Logo
      logo-progress-bar-fill-color: -g($branding, primary-color-600),
      // Switch
      switch-track-color-off: rgba(#000000, 26%),
    ),
    debug-components: (
      // Top bar
      top-bar-background-color: color.scale(theme.$light-background, $lightness: -20%),
    )
  );
}
