@use "sass:math";
@use "sass:map";
@use "@befe/brick-style/src/themes/base";
@use "@befe/brick-style/src/themes/date-picker";
@use "base" as *;

// 面板内的 item 样式
@use "date-item";


.brick-date-picker {
  @include base.reset();
  & {
    width: 100%;
    display: inline-block;
  }
}

// 整体 panel 布局 (单一面板)
.brick-date-picker-panel-wrapper {
  position: relative;
  user-select: none;

  background-color: #fff;

  box-shadow: date-picker.$date-picker-panel-shadow;
  border-radius: date-picker.$date-picker-panel-border-radius-s;
  display: inline-block;
}

// 整体 panel 布局 (range 面板)
.brick-date-picker-range-wrapper {
  display: inline-block;
  box-shadow: date-picker.$date-picker-panel-shadow;
  border-radius: date-picker.$date-picker-panel-border-radius-s;
  white-space: nowrap;

  .brick-date-picker-panel-wrapper {
    box-shadow: none;
    border-radius: unset;
    vertical-align: top;
  }

  .brick-date-picker-panel-wrapper + .brick-date-picker-panel-wrapper {
    margin-left: 0;
    border-left: $border-inner;
  }
}

// 选择器内容区域
.brick-date-picker-item-layout-wrapper {
  font-family: base.$font-family;
  color: base.$color-text-primary;
}

// 内容项的布局
@include datePickerContentLayout(
  $type: 'date',
  $width: map.get(date-picker.$date-picker-normal-item-size-list, 'md'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'md'),
  $width-gap: base.padding(2),
  $height-gap: base.padding(1),
  $size: 'md',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'md'),
);

@include datePickerContentLayout(
  $type: 'month',
  $width: map.get(date-picker.$date-picker-month-and-quarter-item-width-list, 'md'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'md'),
  $width-gap: map.get(date-picker.$date-picker-month-item-gap-list, 'md'),
  $height-gap: base.padding(6),
  $size: 'md',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'md'),
);

@include datePickerContentLayout(
  $type: 'quarter',
  $width: map.get(date-picker.$date-picker-month-and-quarter-item-width-list, 'md'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'md'),
    // @todo: 这个在 quarter 中无用
  $width-gap: 48px,
  $height-gap: base.padding(6),
  $size: 'md',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'md'),
);


@include datePickerContentLayout(
  $type: 'date',
  $width: map.get(date-picker.$date-picker-normal-item-size-list, 'sm'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'sm'),
  $width-gap: base.padding(2),
  $height-gap: base.padding(1),
  $size: 'sm',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'sm'),
);

@include datePickerContentLayout(
  $type: 'month',
  $width: map.get(date-picker.$date-picker-month-and-quarter-item-width-list, 'sm'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'sm'),
  $width-gap: map.get(date-picker.$date-picker-month-item-gap-list, 'sm'),
  $height-gap: base.padding(6),
  $size: 'sm',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'sm'),
);

@include datePickerContentLayout(
  $type: 'quarter',
  $width: map.get(date-picker.$date-picker-month-and-quarter-item-width-list, 'sm'),
  $height: map.get(date-picker.$date-picker-normal-item-size-list, 'sm'),
    // @todo: 这个在 quarter 中无用
  $width-gap: 48px,
  $height-gap: base.padding(6),
  $size: 'sm',
  $height-week-row: map.get(date-picker.$date-picker-week-row-height-list, 'sm'),
);

// 选择器内部内容的布局 (日期)
[data-content-type="date"] .brick-date-picker-content-wrapper {
  padding: $normal-gap $normal-gap*2 $normal-gap*2;
}

// 选择器内部内容的布局 (日期的快捷月份选择以及月份)
[data-content-type="month"], [data-content-type="quarter"] {
  .brick-date-picker-content-wrapper {
    padding: 0;
    white-space: nowrap;

    .brick-date-picker-aside, .brick-date-picker-item-layout-wrapper {
      display: inline-block;
      vertical-align: top;
    }

    .brick-date-picker-aside {
      padding: math.div($normal-gap, 2) 0;
      border-right: $border-inner;
    }

    .brick-date-picker-item-layout-wrapper {
      padding: 24px math.div($normal-gap, 2)*3 42px;
    }
  }

  .brick-title-text {
    margin-left: 10px;
    margin-right: 6px;
  }
}

// input 框图标样式控制
.brick-calender-icon {
  cursor: pointer;
}

.brick-input-disabled .brick-calender-icon {
  cursor: not-allowed;
}

// 尺寸控制
@each $size in date-picker.$date-picker-size-list {
  $font-size: map.get(date-picker.$date-picker-item-font-size-list, $size);
  $line-height: map.get(date-picker.$date-picker-normal-item-size-list, $size);
  $week-title-height: map.get(date-picker.$date-picker-week-row-height-list, $size);

  // time col 的宽高设置
  $width-time-col-aside: $normal-gap*10;
  $height-time-col-aside: $normal-gap + $normal-gap*2
    + $line-height*6 + base.padding(1)*6
    + $week-title-height + $gap-week-title-and-content;

  .brick-date-picker-popper-size-#{$size}, .brick-range-picker-popper-size-#{$size} {
    font-size: $font-size;
    line-height: $line-height;

    $width-normal-item-size: map.get(date-picker.$date-picker-normal-item-size-list, $size);
    $width-panel-content: $width-normal-item-size*7 + $normal-gap*6;
    $width-panel: $width-panel-content + $normal-gap*4;

    .brick-date-picker-panel-wrapper {
      width: $width-panel;
    }

    // panel 标题区域
    .brick-date-picker-title-wrapper {
      border-bottom: $border-inner;
    }

    // # 有 show time 的场景下, 限定宽度
    &.brick-date-picker-popper-show-time .brick-date-picker-title {
      width: $width-panel;
      position: relative;
    }

    // panel 标题区域
    .brick-date-picker-title {
      $height-picker-title: map.get(date-picker.$date-picker-title-height-list, $size);
      $zoom-icon-line-height-adjustment: map.get(date-picker.$date-picker-zoom-icon-line-height-adjustment-list, $size);

      text-align: center;
      line-height: $height-picker-title;

      .brick-icon {
        color: date-picker.$date-picker-title-icon-color;
        cursor: pointer;
      }

      // 标题 / 左右导航图标
      .brick-nav-back, .brick-nav-forward {
        position: absolute;
      }

      .brick-nav-back {
        left: $arrow-gap;
      }

      .brick-nav-forward {
        right: $arrow-gap;
      }

      .brick-icon svg {
        width: $font-size;
        // @to-remove: 热区扩大, 本样式可考虑去除
        //cursor: pointer;
      }

      .brick-nav-icon + .brick-nav-icon {
        margin-left: 12px;
      }

      // 标题 / 中部标题
      .brick-panel-title {
        display: inline-block;

        &.brick-has-zooming {
          cursor: pointer;
        }

        .brick-title-text {
          font-weight: base.$font-weight-normal;
        }

        .brick-zooming {
          margin-left: $normal-gap;
        }

        .brick-icon {
          // 目前设计中, title 是以 "title text" 作为对齐依据 (剪头会因故落到右侧, 即, 不计入宽度)
          position: absolute;

          // @note: 一个 padding 是必要的, 在 absolute 的场景下, 有一个微小的垂直偏差
          line-height: $height-picker-title + $zoom-icon-line-height-adjustment;
        }
      }
    }

    [data-content-type="date"] .brick-date-picker-content-wrapper {
      /*
        @note: 本次 date & time 追加, 为了让 side content 并行显示 `flex row 模式`

        - 需要跟踪是否有其他问题 #220805:liang
       */
      display: flex;
    }

    // @TODO: 简化层次
    [data-content-type="month"] {
      .brick-date-picker-content-wrapper .brick-date-picker-item-layout-wrapper {
        // @todo: 38px ?? 不是 8 的倍数;
        // @note: 此处 sm / md 的情况都一致
        padding: map.get(date-picker.$date-picker-month-inner-content-margin-list, $size);
      }
    }

    [data-content-type="quarter"] {
      .brick-date-picker-content-wrapper .brick-date-picker-item-layout-wrapper {
        // @todo: 此处的 UI 设计, 实际未给出, 出来后, 还需要再对一次
        padding: map.get(date-picker.$date-picker-quarter-inner-content-margin-list, $size);
      }
    }

    // 侧边快捷选择列表
    .brick-date-picker-aside {
      $width-quick-action-aside: date-picker.$date-picker-zoomed-aside-width;
      $height-quick-action-aside: map.get(date-picker.$date-picker-zoomed-aside-height-list, $size);

      width: $width-quick-action-aside;
      height: $height-quick-action-aside;
      overflow: hidden;

      &[data-hover-status="hover"] {
        overflow: auto;
      }

      .brick-aside-item {
        color: date-picker.$date-picker-year-panel-font-color;
        height: $height-normal-line;
        line-height: $height-normal-line;

        text-align: center;
      }

      [data-state="selected"] {
        color: date-picker.$date-picker-year-panel-font-color-selected;
        background-color: date-picker.$date-picker-year-panel-bg-color-selected;
      }
    }

    // brick 中, 日期选择器的 "date & time" 样式调整
    &.brick-date-picker-popper-show-time .brick-date-picker-panel-wrapper {
      width: auto;

      .brick-date-picker-content-wrapper {
        width: auto;
        padding: 0;
      }

      .brick-date-picker-item-layout-wrapper {
        padding: $normal-gap $normal-gap $normal-gap*2 $normal-gap*2;
      }

      .brick-date-picker-panel-side-content-wrapper {
        margin-left: 8px;
      }

      // 时间列的样式
      .brick-time-picker-panel-wrapper {
        $height-normal-line: 28px;

        // 宽度重置
        &, &.with-second {
          .brick-time-picker-aside {
            width: $width-time-col-aside;
            height: $height-time-col-aside;

            // 交互考虑: 需要确保最后一项能置顶显示 ( 此项与 ui time 组件的样式有关联, 修改时, 需要同步修改 )
            padding: 4px 0 $height-time-col-aside;
          }
        }
      }
    }
  }
}

// date picker panel footer 相关 ( 有 time 的场景 )
.brick-date-picker-panel-with-footer {
  .brick-date-picker-panel-wrapper {
    box-shadow: none;
  }
}

.brick-date-picker-panel-footer {
  display: flex;

  // @todo => scss vars
  padding: 8px 16px;
  align-items: center;

  border-top: $border-inner;
  background: base.$color-bg-intensive;

  .right-section {
    margin-left: auto;
  }
}

// multi date picker

.brick-multi-date-picker {
  .brick-multi-date-picker-input-content {
    margin-left: base.padding(3);
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brick-multi-date-picker-placeholder {
    color: base.color-gray(7);
  }

  .brick-multi-date-picker-date-count {
    color: base.color-gray(7);
    margin-left: base.padding(1);
  }

  // icon
  .brick-multi-date-picker-closeable-icon {
    cursor: pointer;
  }

  .brick-multi-date-picker-close-icon {
    display: none;
  }

  &:hover {
    .brick-multi-date-picker-calendar-icon {
      display: none;
    }

    .brick-multi-date-picker-close-icon {
      display: inline-block;
    }
  }
}

.brick-multi-date-picker-selected-popper {
  .brick-popper-inner {
    padding: base.padding(3);
    max-height: base.padding(60);
    overflow: auto;
  }

  .brick-multi-date-picker-selected-popper-clear-all {
    cursor: pointer;
    text-align: right;

    &:hover {
      color: base.$color-base-brand;
    }
  }

  .brick-multi-date-picker-selected-popper-item {
    display: flex;
    align-items: center;

    &.brick-multi-date-picker-selected-popper-clear-all {
      margin-bottom: base.padding(2);
    }

    ~ .brick-multi-date-picker-selected-popper-item {
      margin-top: base.padding(1);
    }

    span {
      flex: 1;
    }

    .brick-icon {
      margin-left: base.padding(1);
      color: base.color-gray(8);
      cursor: pointer;
      opacity: 0.2;
    }

    &:hover .brick-icon {
      opacity: 1;

      &:hover {
        color: base.$color-base-brand;
      }
    }
  }
}