@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$upload: () !default;
$upload: map.merge(
  (
    color-success: value('color-success-base'),
    color-fail: value('color-error-base'),
    color-loading: value('content-color-disabled'),
    panel-bg-color: value('fill-color-base'),
    panel-b-width: value('border-width'),
    panel-b-style: dashed,
    panel-b-color: value('border-color-base'),
    panel-b-color-hover: value('color-primary-base'),
    panel-b-color-focus: value('upload-panel-b-color-hover'),
    panel-b-color-over: value('color-primary-base'),
    panel-b-color-disabled: value('border-color-light-2'),
    panel-radius: value('radius-base'),
    cloud-color: value('content-color-secondary'),
    cloud-color-over: value('color-primary-base'),
    cloud-color-disabled: value('content-color-disabled'),
    file-bg-color: transparent,
    file-bg-color-hover: value('fill-color-hover'),
    file-b-color: value('border-color-base'),
    file-b-color-success: value('color-success-base'),
    file-b-color-fail: value('color-error-base'),
    file-radius: value('radius-base'),
    mask-bg-color: value('color-black'),
    mask-opacity: 45%,
    action-color: value('content-color-third'),
    action-color-hover: value('content-color-primary'),
    action-color-disabled: value('content-color-disabled'),
    thumb-color: value('content-color-secondary'),
    thumb-size: 70px,
    thumb-action-color: rgba(255, 255, 255, 70%),
    thumb-action-color-hover: rgba(255, 255, 255, 100%),
    thumb-action-color-disabled: rgba(255, 255, 255, 30%),
    card-thumb-size: 56px,
    card-action-color: value('content-color-secondary'),
    card-action-color-hover: value('color-primary-base'),
    card-action-color-disabled: value('content-color-disabled'),
    percentage-color: value('content-color-secondary')
  ),
  $upload
);

.#{$namespace}-upload {
  &-vars {
    @include define-preset-values('upload', $upload);
  }

  @mixin define-upload-style($style-map) {
    @include define-preset-style('upload', $style-map);
  }

  @include basis {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
  }

  &--to-add {
    flex-direction: column-reverse;
  }

  &--block {
    width: 100%;
  }

  $states: success, error, warning;

  @each $state in $states {
    &--#{$state} {
      @include define-upload-style(
        (
          panel-b-color: 'color' $state 'opacity-3',
          panel-b-color-hover: 'color' $state 'base',
          panel-b-color-over: 'color' $state 'base',
          cloud-color: 'color' $state 'opacity-2',
          cloud-color-over: 'color' $state 'base'
        )
      );
    }
  }

  &__input {
    display: none;
  }

  &__control {
    display: flex;
    flex-direction: column;
  }

  &--drag,
  &--drag &__control {
    width: 100%;
  }

  &__image-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 6px;
    margin-inline-end: 6px;
    margin-bottom: 6px;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer;
    border: value('upload-panel-b-width') value('upload-panel-b-style')
      value('upload-panel-b-color');
    border-radius: value('upload-file-radius');
    outline: 0;
    transition: value('transition-color'), value('transition-border');

    &:hover,
    &--drag-over {
      border-color: value('upload-panel-b-color-hover');
    }

    &:focus,
    &:focus-within {
      border-color: value('upload-panel-b-color-focus');
    }

    &--disabled {
      color: value('content-color-disabled');
      cursor: not-allowed;

      &,
      &:hover,
      &:focus {
        border-color: value('upload-panel-b-color-disabled');
      }
    }
  }

  &__image-action {
    @include clean-button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: value('upload-thumb-size');
      height: value('upload-thumb-size');
      color: value('upload-thumb-color');
      cursor: inherit;
    }

    &--disabled {
      color: value('content-color-disabled');
    }
  }

  &__drag-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    overflow: hidden;
    cursor: pointer;
    background-color: value('upload-panel-bg-color');
    border: value('upload-panel-b-width') value('upload-panel-b-style')
      value('upload-panel-b-color');
    border-radius: value('upload-panel-radius');
    outline: 0;
    transition: value('transition-color'), value('transition-border');

    &:hover {
      border-color: value('upload-panel-b-color-hover');
    }

    &:focus {
      border-color: value('upload-panel-b-color-focus');
    }

    &--disabled {
      color: value('content-color-disabled');
      cursor: not-allowed;

      &,
      &:hover,
      &:focus {
        border-color: value('upload-panel-b-color-disabled');
      }
    }
  }

  &--drag-only &__drag-panel {
    cursor: auto;
  }

  &__control--drag-over &__drag-panel {
    border-color: value('upload-panel-b-color-over');

    &--disabled {
      border-color: value('upload-panel-b-color-disabled');
    }
  }

  &__cloud {
    color: value('upload-cloud-color');
    transition: value('transition-color');

    &--disabled {
      color: value('upload-cloud-color-disabled');
    }
  }

  &__control--drag-over &__cloud,
  &__image-control--drag-over &__cloud {
    color: value('upload-cloud-color-over');

    &--disabled {
      color: value('upload-cloud-color-disabled');
    }
  }

  &__loading-icon {
    pointer-events: none;
    transition: value('transition-opacity');
  }

  &__tip {
    margin: 4px 0;
  }

  &__drag-panel &__tip {
    margin: 8px 0 4px;
    user-select: none;
  }

  &__files {
    @include basis {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      padding: 0;
      margin: 0;
    }
  }

  &--image &__files {
    margin-bottom: -8px;
  }

  &--has-file:not(&--image) &__files {
    margin: 0;
    margin-top: 8px;
  }

  &--to-add:not(&--image)#{&}--has-file &__files {
    margin: 0;
    margin-bottom: 8px;
  }

  &__file {
    @include basis {
      position: relative;
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
      list-style: none;
      border-radius: value('upload-file-radius');
      transition: value('transition-transform'), value('transition-opacity');
    }

    &--name {
      justify-content: space-between;
      width: 100%;
      padding: 3px 6px;
      margin-bottom: 3px;
      background-color: value('upload-file-bg-color');
      transition: value('transition-background');

      &:hover,
      &:focus,
      &:focus-within {
        background-color: value('upload-file-bg-color-hover');
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    &--thumbnail,
    &--card {
      padding: 6px;
      margin-bottom: 6px;
      border: value('border-shape') value('upload-file-b-color');
      transition: value('transition-border');
    }

    &--thumbnail {
      margin-inline-end: 6px;
    }

    &--thumbnail#{&}--success,
    &--card#{&}--success {
      border-color: value('upload-file-b-color-success');
    }

    &--thumbnail#{&}--fail,
    &--card#{&}--fail {
      border-color: value('upload-file-b-color-fail');
    }

    &--card {
      width: 100%;
    }
  }

  &__filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: value('transition-color');
  }

  &__file--success &__filename {
    color: value('upload-color-success');
  }

  &__file--fail &__filename {
    color: value('upload-color-fail');
  }

  &__label {
    display: flex;
    align-items: center;
    margin-inline-end: 14px;
    user-select: none;
  }

  &__card {
    position: relative;
    display: flex;
    align-items: center;

    * {
      flex-shrink: 0;
    }
  }

  &__file--thumbnail &__card {
    justify-content: center;
  }

  &__file--card &__card {
    width: 100%;
  }

  &__thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    color: value('upload-thumb-color');
  }

  &__file--thumbnail &__thumbnail {
    width: value('upload-thumb-size');
    height: value('upload-thumb-size');
  }

  &__file--card &__thumbnail {
    width: value('upload-card-thumb-size');
    height: value('upload-card-thumb-size');
    margin-inline-end: 14px;
  }

  &__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - #{value('upload-card-thumb-size')} - 14px);
    padding-inline-end: calc(#{value('upload-card-thumb-size')} + 14px);
  }

  &__file--card &__filename {
    width: 100%;
  }

  &__image {
    width: 100%;
    height: 100%;
    user-select: none;
    object-fit: cover;
  }

  &__actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__file--thumbnail &__actions {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0%;
    transition: value('transition-opacity');
  }

  &__file--thumbnail &__mask {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: value('upload-mask-bg-color');
    opacity: value('upload-mask-opacity');
  }

  &__card:hover &__actions,
  &__card:focus &__actions,
  &__card:focus-within &__actions {
    opacity: 100%;
  }

  &__file--card &__actions {
    position: absolute;
    inset-inline-end: 0;
  }

  &__action {
    @include clean-button {
      position: relative;
      margin: 0 4px;
    }

    &--disabled {
      color: value('upload-action-color-disabled');
      cursor: not-allowed;
    }
  }

  &__file--thumbnail &__action {
    color: value('upload-thumb-action-color');

    &:hover,
    &:focus {
      color: value('upload-thumb-action-color-hover');
    }

    &--disabled {
      &,
      &:hover,
      &:focus {
        color: value('upload-thumb-action-color-disabled');
      }
    }
  }

  &__file--card &__action {
    color: value('upload-card-action-color');

    &:hover,
    &:focus {
      color: value('upload-card-action-color-hover');
    }

    &--disabled {
      &,
      &:hover,
      &:focus {
        color: value('upload-card-action-color-disabled');
      }
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: value('transition-color');
  }

  &__file-icon {
    width: 16px;
    margin-inline-end: 4px;
  }

  &__success,
  &__fail,
  &__loading,
  &__close {
    width: 14px;
  }

  &__close {
    @include clean-button {
      position: absolute;
      inset-inline-end: 0;
    }

    &:hover,
    &:focus {
      color: value('upload-action-color-hover');
    }
  }

  &__close,
  &__file:hover &__success,
  &__file:hover &__fail,
  &__file:hover &__loading {
    color: transparent;
  }

  &__file:hover &__close {
    color: value('upload-action-color');

    &:hover,
    &:focus {
      color: value('upload-action-color-hover');
    }
  }

  &__success {
    color: value('upload-color-success');
  }

  &__fail {
    color: value('upload-color-fail');
  }

  &__loading {
    color: value('upload-color-loading');
  }

  &__progress {
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
  }

  &__file--name &__progress {
    position: absolute;
    inset-inline: 6px;
    bottom: 0;
  }

  &__file--thumbnail &__progress {
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 6px;
  }

  &__file--card &__progress {
    padding-top: 4px;
  }

  &__percentage {
    color: value('upload-percentage-color');
  }
}