@use 'sass:map';
@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/typography' as typography;
@use '@mezzanine-ui/system/z-index' as z-index;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/effect' as effect;
@use '../button';
@use '../checkbox/checkbox' as checkbox;
@use './modal' as *;

// ModalStatusType - keep this list in sync with TypeScript type ModalStatusType
$modalStatusTypes: (
  'info',
  'success',
  'warning',
  'error',
  'email',
  'delete',
);

// ModalSize - keep this list in sync with TypeScript type ModalSize
$modalSizes: (
  'tight',
  'narrow',
  'regular',
  'wide',
);

@mixin _full-screen() {
  position: absolute;
  width: 100%;
  min-height: 100%;
  inset: 0;
  transform: none;
}

.#{$prefix} {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: palette.semantic-variable("background", base);
  box-sizing: border-box;
  box-shadow: effect.variable(shadow, modal);
  border-radius: radius.variable(roomy);
  pointer-events: auto;
  max-height: 100dvh;
  overflow: hidden;

  // each size variant
  @each $size in $modalSizes {
    &--#{$size} {
      @if $size == 'tight' {
        width: spacing.semantic-variable(size, container, narrow);
      } @else if $size == 'narrow' {
        width: spacing.semantic-variable(size, container, balanced);

        .#{$prefix}__body-container {
          min-height: spacing.semantic-variable(size, container, tight);
        }
      } @else if $size == 'regular' {
        width: spacing.semantic-variable(size, container, wide);

        .#{$prefix}__body-container {
          min-height: spacing.semantic-variable(size, container, tight);
        }
      } @else if $size == 'wide' {
        width: max-content;
        max-width: calc(100% - spacing.semantic-variable(padding, horizontal, spacious) * 2);
        max-height: min(spacing.semantic-variable(size, container, expanded), 100dvh);

        .#{$prefix}__body-container {
          padding-top: spacing.semantic-variable(padding, vertical, spacious);
          padding-bottom: spacing.semantic-variable(padding, vertical, spacious);
        }
      }
    }
  }

  &--full-screen {
    @include _full-screen();
  }

  &__content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  &__close-icon {
    position: absolute;
    right: spacing.semantic-variable(padding, horizontal, comfort);
    top: spacing.semantic-variable(padding, horizontal, comfort);
    cursor: pointer;
  }

  &__header {
    flex-shrink: 0;
    padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, relaxed);

    &--show-modal-status-type-icon {
      padding: spacing.semantic-variable(padding, vertical, generous) spacing.semantic-variable(padding, horizontal, relaxed) spacing.semantic-variable(padding, vertical, spacious);
    }

    &--horizontal {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: spacing.semantic-variable(gap, calm);

      .#{$prefix}__header__title-supporting-text-container {
        gap: spacing.semantic-variable(gap, slim);
      }

      .#{$prefix}__header__title {
        padding-top: spacing.semantic-variable(gap, tight);
        padding-bottom: spacing.semantic-variable(gap, tight);
      }

    }

    &--vertical {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: spacing.semantic-variable(gap, calm);
    }

    &--title-align-left {
      align-items: flex-start;
    }

    &--title-align-center {
      align-items: center;

      .#{$prefix}__header__title {
        text-align: center;
      }
    }

    &__status-type-icon {
      width: spacing.semantic-variable(size, element, roomy);
      height: spacing.semantic-variable(size, element, roomy);
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: radius.variable(full);
    }

    &__title-supporting-text-container {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: spacing.semantic-variable(gap, tight);
    }

    &__title {
      width: 100%;
      margin: 0;
    }

    &__supporting-text {
      width: 100%;
      margin: 0;

      &--align-left {
        text-align: left;
      }

      &--align-center {
        text-align: center;
      }
    }
  }

  &__body-container {
    flex: 1;
    min-height: 0;
    padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, relaxed);
    overflow-y: auto;
    box-sizing: border-box;

    &--with-top-separator {
      border-top: 1px solid palette.semantic-variable(separator, neutral-faint);
    }

    &--with-bottom-separator {
      border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
    }

    &__extended-split {
      display: flex;
      flex-wrap: nowrap;
      flex: 1;
      min-height: 0;
      border-top: 1px solid palette.semantic-variable(separator, neutral-faint);

      &--sidebar-left {
        flex-direction: row-reverse;

        .#{$prefix}__body-container__extended-split-left {
          border-left: none;
          border-right: 1px solid palette.semantic-variable(separator, neutral-faint);
        }
      }
    }

    &__extended-split-right {
      display: flex;
      flex-direction: column;
      width: max-content;
      flex-grow: 1;
      padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, relaxed);
    }

    &__extended-split-left {
      width: fit-content;
      min-width: spacing.semantic-variable(size, container, narrow);
      display: flex;
      flex-direction: column;
      border-left: 1px solid palette.semantic-variable(separator, neutral-faint);
    }

    &__extended-split-left__content {
      flex: 1;
      padding: spacing.semantic-variable(padding, vertical, spacious) spacing.semantic-variable(padding, horizontal, relaxed);
      border-bottom: 1px solid palette.semantic-variable(separator, neutral-faint);
    }
  }

  &__body-verification {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: spacing.semantic-variable(gap, base);

    &__inputs {
      display: flex;
      gap: spacing.semantic-variable(gap, comfort);

      &--extended {
        gap: spacing.semantic-variable(gap, base);

        .#{$prefix}__body-verification__input {
          width: spacing.semantic-variable(size, element, loose);
          height: spacing.semantic-variable(size, element, extra-wide);
        }
      }
    }

    &__input {
      display: flex;
      width: spacing.semantic-variable(size, element, wide-expanded);
      height: spacing.semantic-variable(size, element, wide-expanded);
      padding: 0;
      justify-content: center;
      align-items: center;
      text-align: center;

      @include typography.semantic-variable(h1);

      color: palette.semantic-variable(text, brand);
      background-color: palette.semantic-variable('background', base);
      border: 1px solid palette.semantic-variable(border, neutral-light);
      border-radius: radius.variable(base);
      outline: none;
      transition: border-color 0.2s, color 0.2s, background-color 0.2s;

      &:focus {
        border-color: palette.semantic-variable(border, neutral-light);
        box-shadow: 0 0 0 1px palette.semantic-variable('background', base), 0 0 0 2px palette.semantic-variable('background', brand);
      }

      &:hover:not(:focus, :disabled, [readonly]) {
        color: palette.semantic-variable(text, neutral-light);
        border-color: palette.semantic-variable(border, brand);
      }

      &:not(:placeholder-shown) {
        color: palette.semantic-variable(text, brand);
        border-color: palette.semantic-variable(border, brand);
      }

      &:disabled {
        color: palette.semantic-variable(text, neutral-light);
        background-color: palette.semantic-variable('background', neutral-subtle);
        border-color: palette.semantic-variable(border, neutral-light);
        cursor: not-allowed;
      }

      &[readonly] {
        color: palette.semantic-variable(text, neutral-solid);
        background-color: palette.semantic-variable('background', neutral-subtle);
        border-color: palette.semantic-variable(border, neutral-light);
        cursor: default;
      }

      &--error {
        color: palette.semantic-variable(text, error);
        border-color: palette.semantic-variable(border, error);
      }
    }

    &__resend {
      display: flex;
      gap: spacing.semantic-variable(gap, tight);
      align-items: center;
    }

    &__resend-link {
      &:hover {
        opacity: 0.8;
      }
    }
  }

  &__footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding: spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, relaxed) spacing.semantic-variable(padding, vertical, comfort) spacing.semantic-variable(padding, horizontal, relaxed);

    &--password-mode {
      flex-direction: column;
      align-items: stretch;
      gap: spacing.semantic-variable(gap, base);
    }

    &--with-auxiliary-content {
      justify-content: space-between;
    }

    &__password-container {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding-block-start: spacing.semantic-variable(padding, vertical, comfort);

      .#{checkbox.$prefix}.#{checkbox.$prefix}--main {
        padding-block: spacing.semantic-variable(padding, vertical, tight);
      }
    }

    &__auxiliary-content-container {
      display: flex;
      align-items: center;
    }

    &__actions-button-container {
      display: flex;
      justify-content: flex-end;
      gap: spacing.semantic-variable(gap, base);

      &--fill-layout {
        flex-grow: 1;
        .#{$prefix}__footer__actions-button {
          flex-grow: 1;
        }
      }
    }
  }

  @each $status-type in $modalStatusTypes {
    &--#{$status-type} {
      .#{$prefix}__header {
        &__status-type-icon {
          @if $status-type == 'info' {
            background-color: palette.semantic-variable("background", info-faint);
          } @else if $status-type == 'success' {
            background-color: palette.semantic-variable("background", success-faint);
          } @else if $status-type == 'warning' {
            background-color: palette.semantic-variable("background", warning-faint);
          } @else if $status-type == 'error' {
            background-color: palette.semantic-variable("background", error-faint);
          } @else if $status-type == 'email' {
            background-color: palette.semantic-variable("background", info-faint);
          } @else if $status-type == 'delete' {
            background-color: palette.semantic-variable("background", error-faint);
          }
        }
      }
    }
  }

  &--media-preview {
    width: 100vw;
    height: 100dvh;
    background-color: unset;
    padding: 0;
    box-shadow: none;
    overflow: visible;
  }

  &__media-preview-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  &__media-preview-media-container {
    position: relative;
    width: 100%;
    height: 100%;
  }

  &__media-preview-image {
    position: absolute;
    inset: 0;
    margin: auto;
    // 36px 是 icon button 的寬度加上 padding
    max-width: calc(100vw - (spacing.semantic-variable(padding, horizontal, wide) + 36px + spacing.semantic-variable(padding, horizontal, relaxed)) * 2);
    max-height: calc(100vh - (spacing.semantic-variable(padding, vertical, base) + typography.primitive-line-height-variable(body) + spacing.semantic-variable(padding, vertical, comfort)) * 2);
    width: auto;
    height: auto;

    // For img elements
    &[src] {
      object-fit: contain;
    }

    // For custom content wrapper (div)
    &:not([src]) {
      display: flex;
      align-items: center;
      justify-content: center;

      > * {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }

  &__media-preview-nav-button {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: palette.semantic-variable("background", neutral-solid);
    border: none;
    border-radius: radius.variable(full);
    color: palette.semantic-variable(icon, neutral-light);
    cursor: pointer;
    z-index: z-index.get(modal);
    padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, cozy);
    pointer-events: auto;

    &:hover:not(:disabled) {
      background-color: palette.semantic-variable(overlay, strong);
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    &--prev {
      left: spacing.semantic-variable(padding, horizontal, relaxed);
    }

    &--next {
      right: spacing.semantic-variable(padding, horizontal, relaxed);
    }
  }

  &__media-preview-pagination-indicator {
    position: fixed;
    bottom: spacing.semantic-variable(padding, vertical, comfort);
    left: 50%;
    transform: translateX(-50%);
    color: palette.semantic-variable(text, fixed-light);
    z-index: z-index.get(modal);

    @include typography.semantic-variable(body);
  }

  &__media-preview-close-button {
    position: fixed;
    top: spacing.semantic-variable(padding, vertical, relaxed);
    right: spacing.semantic-variable(padding, horizontal, relaxed);
    z-index: z-index.get(modal);
    padding: spacing.semantic-variable(padding, vertical, calm) spacing.semantic-variable(padding, horizontal, cozy);
  }
}