@import "../lib.less";
@import "../variables/components/date-picker.less";
@import "../variables/components/input.less";

.make-header-height(@font-size) {
  @header-height: veui-sum(
    veui-line-height(@veui-line-height-m, @font-size),
    @veui-date-picker-header-padding-y * 2
  );
}

.make-day-body-height(@font-size, @date-picker-cell-height) {
  @day-body-height: veui-sum(
    @veui-date-picker-day-body-padding-top,
    veui-line-height(@veui-line-height-m, @font-size),
    @veui-date-picker-day-body-padding-bottom,
    @veui-date-picker-weekdays-spacing-after,
    @date-picker-cell-height * 6,
    @veui-date-picker-day-cell-spacing-y * 7
  );
}

.make-month-body-height(@font-size, @date-picker-cell-height) {
  @month-body-height: veui-sum(
    @veui-date-picker-month-body-padding-top,
    @veui-date-picker-month-cell-spacing-y * 4,
    @date-picker-cell-height * 4
  );
}

.make-year-body-height(@font-size, @date-picker-cell-height) {
  @year-body-height: veui-sum(
    @veui-date-picker-year-body-padding-top,
    @veui-date-picker-year-cell-spacing-y * 4,
    @date-picker-cell-height * 4
  );
}

.make-date-panel-width(@date-picker-cell-width) {
  @date-panel-width: veui-sum(
    @veui-date-picker-panel-padding-x * 2,
    @date-picker-cell-width * 7,
    @veui-date-picker-day-cell-spacing-x * 8
  );
}

.@{veui-prefix}-calendar {
  display: inline-block;
  border: 1px solid @veui-date-picker-panel-separator-color;
  background-color: @veui-date-picker-dropdown-background-color;
  outline: none;
  font-size: @veui-date-picker-font-size-m;

  button {
    .veui-button-transition();
    line-height: @veui-line-height-m;

    &.focus-visible {
      .veui-focus-ring(
        @veui-date-picker-cell-border-focus-color,
        @veui-date-picker-cell-shadow-focus
      );
    }
  }

  .make-date-panel-width(@veui-date-picker-cell-width-m);

  &-type-year .@{veui-prefix}-date-picker-inputs {
    width: veui-sum(@date-panel-width, -@veui-date-picker-year-scroller-width);
  }

  &-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    .size(@date-panel-width, auto);

    .@{veui-prefix}-calendar-range & {
      display: inline-flex;
    }

    & + & {
      padding-left: @veui-date-picker-range-panel-spacing;
      width: veui-sum(@date-panel-width, @veui-date-picker-range-panel-spacing);
    }

    .@{veui-prefix}-calendar-body {
      flex-grow: 1;
    }

    &::before {
      content: "";
      .make-header-height(@veui-date-picker-font-size-m);
      .absolute(veui-sum(@header-height, -1px), 0, _, 0);
      height: 0;
      border-bottom: 1px solid @veui-date-picker-panel-separator-color;
    }
  }

  &-type-year &-panel::before {
    display: none;
  }

  &-panel + &-expanded &-body,
  &-panel + &-expanded &-head,
  &-expanded + &-panel &-body,
  &-expanded + &-panel &-head {
    position: relative;
    &::after {
      content: "";
      display: block;
      .absolute(0, _, 0, -@veui-date-picker-range-panel-spacing / 2);
      border-left: 1px solid @veui-date-picker-panel-separator-color;
    }
  }
  &-type-month &-panel,
  &-type-year &-panel {
    width: veui-sum(@date-panel-width, -@veui-date-picker-year-scroller-width);
  }
  &-type-month &-panel + &-panel {
    width: veui-sum(
      @date-panel-width,
      -@veui-date-picker-year-scroller-width,
      @veui-date-picker-range-panel-spacing
    );
  }

  &-head {
    padding: @veui-date-picker-header-padding-y @veui-date-picker-panel-padding-x;
    display: flex;
    align-items: center;

    .@{veui-prefix}-icon {
      line-height: @veui-line-height-m;
    }

    .@{veui-prefix}-calendar-select,
    .@{veui-prefix}-calendar-prev,
    .@{veui-prefix}-calendar-next,
    .@{veui-prefix}-calendar-backward,
    .@{veui-prefix}-calendar-forward {
      flex-grow: 0;
      visibility: hidden;

      &.@{veui-prefix}-calendar-visible {
        visibility: visible;
      }

      .@{veui-prefix}-icon {
        .veui-icon-size(@veui-date-picker-header-pagination-icon-size);
        color: @veui-date-picker-icon-color;
      }
    }

    .@{veui-prefix}-calendar-prev {
      margin-left: @veui-date-picker-header-pagination-spacing;
    }
    .@{veui-prefix}-calendar-next {
      margin-right: @veui-date-picker-header-pagination-spacing;
    }

    .@{veui-prefix}-calendar-select {
      text-align: center;
      color: @veui-font-color-normal;
      margin: auto;
      height: auto;
      border: none;
      line-height: @veui-line-height-m;

      &.focus-visible,
      &:hover {
        background-color: @veui-background-color-normal;
        color: @veui-font-color-normal;
      }

      .@{veui-prefix}-icon {
        margin-left: @veui-date-picker-header-icon-aux-spacing;
        margin-right: 0;
        .veui-icon-size(@veui-date-picker-header-icon-size-aux);
        .veui-transition(transform);

        .@{veui-prefix}-calendar-expanded & {
          transform: rotate(180deg);
        }
      }
    }
  }

  &-body {
    display: flex;
  }

  &-type-date &-body {
    .make-day-body-height(
      @veui-date-picker-font-size-m,
      @veui-date-picker-cell-height-m
    );
    height: @day-body-height;
  }

  &-type-month &-body {
    .make-month-body-height(
      @veui-date-picker-font-size-m,
      @veui-date-picker-cell-height-m
    );
    height: @month-body-height;
  }

  &-type-year &-body {
    .make-year-body-height(
      @veui-date-picker-font-size-m,
      @veui-date-picker-cell-height-m
    );
    height: @year-body-height;
  }

  &-type-date &-panel:not(&-expanded) &-body {
    padding: @veui-date-picker-day-body-padding-top
      @veui-date-picker-panel-padding-x @veui-date-picker-day-body-padding-bottom;
  }

  &-type-month &-expanded &-body,
  &-type-year &-body {
    .@{veui-prefix}-calendar-year-table-wrap {
      overflow: auto;
      padding: veui-sum(
          @veui-date-picker-month-body-padding-top,
          -@veui-date-picker-month-cell-spacing-y
        )
        @veui-date-picker-panel-padding-x-unit 0;
    }
    .@{veui-prefix}-calendar-year-table {
      width: 100%;
    }
  }

  &-table {
    flex-grow: 1;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: @veui-date-picker-day-cell-spacing-x
      @veui-date-picker-day-cell-spacing-y;

    th,
    td {
      text-align: center;
      padding: 0;
      font-weight: @veui-date-picker-cell-font-weight;
    }

    button {
      border: 1px solid @veui-date-picker-cell-border-color;
      border-radius: @veui-date-picker-cell-border-radius;
      padding: 0;
      background-color: @veui-date-picker-cell-background-color;
      color: @veui-date-picker-cell-font-color;
      text-align: center;
      outline: none;
      cursor: pointer;
      font-weight: @veui-date-picker-cell-font-weight;
      .size(auto, @veui-date-picker-cell-height-m);

      &:hover {
        background-color: @veui-date-picker-cell-background-color-aux-hover;
      }

      &.focus-visible {
        background-color: @veui-date-picker-cell-background-color-focus;
        .veui-focus-ring(
          @veui-date-picker-cell-border-focus-color,
          @veui-date-picker-cell-shadow-focus
        );
      }

      &:active {
        background-color: @veui-date-picker-cell-background-color-aux-active;
      }

      &:disabled {
        &,
        &:hover {
          background-color: @veui-date-picker-cell-background-color-disabled;
          color: @veui-date-picker-cell-font-color-disabled;
          cursor: not-allowed;
        }
      }
    }
  }

  &-type-date {
    th {
      padding-bottom: veui-sum(
        @veui-date-picker-weekdays-spacing-after,
        -@veui-date-picker-day-cell-spacing-y
      );
    }
  }

  &-date-table button {
    .size(@veui-date-picker-cell-width-m, @veui-date-picker-cell-height-m);
  }

  &-month-table,
  &-year-table {
    td {
      width: 100% / 3;
    }
    button {
      // TODO
      transition-duration: 0s;
    }
  }
  &-year-table &-current,
  &-month-table &-current,
  &-table &-selected {
    button {
      background-color: @veui-date-picker-cell-background-color-selected;
      color: @veui-date-picker-cell-font-color-selected;
      font-weight: @veui-date-picker-cell-font-weight-selected;

      &:hover {
        background-color: @veui-date-picker-cell-background-color-selected-hover;
      }

      &.focus-visible {
        background-color: @veui-date-picker-cell-background-color-selected-focus;
      }

      &:active {
        background-color: @veui-date-picker-cell-background-color-selected-active;
      }
    }
  }

  &-month-table {
    padding: veui-sum(
        @veui-date-picker-month-body-padding-top,
        -@veui-date-picker-month-cell-spacing-y
      )
      @veui-date-picker-panel-padding-x-unit 0;
    border-spacing: 0 @veui-date-picker-month-cell-spacing-y;

    button {
      width: @veui-date-picker-width-month-button;
    }
  }

  &-year-table {
    border-spacing: 0 @veui-date-picker-year-cell-spacing-y;
    button {
      width: @veui-date-picker-width-month-button;
      padding: 0 @veui-date-picker-year-cell-padding-x;
    }
  }

  &-aux button {
    color: @veui-date-picker-cell-font-color-aux;
    background-color: @veui-date-picker-cell-background-color-aux;

    &:hover {
      background-color: @veui-date-picker-cell-background-color-aux-hover;
    }

    &.focus-visible {
      background-color: @veui-date-picker-cell-background-color-aux-focus;
    }

    &:active {
      background-color: @veui-date-picker-cell-background-color-aux-active;
    }
  }

  &-year-scroller &-current button {
    background-color: @veui-date-picker-list-background-color-selected;
    color: @veui-date-picker-list-font-color-selected;
  }
  &-today {
    button {
      position: relative;
      color: @veui-date-picker-cell-font-color-current;
      &::after {
        content: "";
        position: absolute;
        width: @veui-height-unit;
        height: @veui-height-unit;
        border-radius: 50%;
        background-color: @veui-date-picker-cell-current-point-color;
        margin: auto;
        left: 0;
        right: 0;
        bottom: @veui-date-picker-cell-current-point-bottom;
      }
      &:hover::after {
        background-color: @veui-date-picker-cell-current-point-color-hover;
      }
      &.focus-visible::after {
        background-color: @veui-date-picker-cell-current-point-color-focus;
      }
      &:active::after {
        background-color: @veui-date-picker-cell-current-point-color-active;
      }
      &:disabled::after {
        background-color: @veui-date-picker-cell-current-point-color-disabled;
      }
    }
    &.@{veui-prefix}-calendar-selected button::after,
    &.@{veui-prefix}-calendar-in-range button::after {
      background-color: @veui-date-picker-cell-current-point-color-selected;
    }
    &.@{veui-prefix}-calendar-aux button::after {
      background-color: @veui-date-picker-cell-current-point-color-aux;
    }
  }

  // in-range
  &-in-range {
    position: relative;
    button {
      background-color: @veui-date-picker-cell-background-color-active;
      border-radius: 0;
    }
  }

  &-in-range&-range-start {
    background-color: transparent;
    button {
      .border-left-radius(@veui-date-picker-cell-border-radius);
    }
  }

  &-in-range&-range-end {
    background-color: transparent;
    button {
      .border-right-radius(@veui-date-picker-cell-border-radius);
    }
  }

  &-in-range&-action-end button,
  &-in-range:not(&-selected):not(&-today) button {
    background-color: @veui-date-picker-cell-background-color-active;
    color: @veui-date-picker-cell-font-color;
    &:hover {
      background-color: @veui-date-picker-cell-background-color-active;
      color: @veui-date-picker-cell-font-color-range-active;
    }
    &.focus-visible {
      background-color: @veui-date-picker-cell-background-color-active;
      color: @veui-date-picker-cell-font-color-range-active;
      border-color: @veui-date-picker-cell-border-focus-color;
      border-radius: @veui-date-picker-cell-border-radius;
      .veui-focus-ring(
        @veui-date-picker-cell-border-focus-color,
        @veui-date-picker-cell-shadow-focus
      );
    }
    &:active {
      color: @veui-date-picker-cell-font-color-range-active;
      background-color: @veui-date-picker-cell-background-color-range-active;
    }
  }

  &-range {
    td {
      position: relative;
      &::before {
        content: "";
        display: block;
        .size(100%);
        .absolute(0, _, _, _);
        background-color: @veui-background-color-normal;
      }
    }
  }

  &-range &-table button {
    position: relative;
  }

  &-in-range:not(&-range-single)::before {
    background-color: @veui-date-picker-cell-background-color-active;
  }

  &-date-table {
    td::before {
      width: @veui-date-picker-day-cell-spacing-x + 1px;
      right: -@veui-date-picker-day-cell-spacing-x;
      .veui-button-transition();
    }
  }
  &-range-end,
  &-in-range:last-child {
    .@{veui-prefix}-calendar-date-table &::before {
      background-color: @veui-background-color-normal;
    }
  }

  &-range-start,
  &-range-end,
  &-in-range:first-child,
  &-in-range:last-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      width: 50%;
    }
  }

  &-range-start,
  &-in-range:first-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      right: 0;
    }
  }
  &-range-start&-range-end,
  &-range-start:last-child,
  &-range-end:first-child {
    .@{veui-prefix}-calendar-month-table &::before,
    .@{veui-prefix}-calendar-year-table &::before {
      background-color: @veui-background-color-normal;
    }
  }

  &-month-table &-range-end:not(&-range-start),
  &-year-table &-range-end:not(&-range-start) {
    &::before {
      left: 0;
    }
  }

  &-year-scroller {
    .size(@veui-date-picker-year-scroller-width, 100%);
    padding: @veui-date-picker-list-padding-y 0 0 0;
    border-right: 1px solid @veui-date-picker-panel-separator-color;
    overflow: auto;
    list-style-type: none;
    margin: 0;

    button {
      padding-left: @veui-date-picker-list-item-padding-x;
      background-color: @veui-date-picker-list-background-color;
      border: none;
      font-weight: @veui-date-picker-list-font-weight;
      .centered-line(@veui-date-picker-list-item-height-m);
      color: @veui-date-picker-list-font-color;
      margin: 0 0 @veui-date-picker-list-item-spacing 0;
      outline: none;
      width: 100%;
      text-align: left;
      cursor: pointer;

      &:hover {
        background-color: @veui-date-picker-list-background-color-hover;
        color: @veui-date-picker-list-font-color-hover;
      }
      &.focus-visible {
        background-color: @veui-date-picker-list-background-color-focus;
        color: @veui-date-picker-list-font-color-focus;
      }
      &:active {
        background-color: @veui-date-picker-list-background-color-active;
        color: @veui-date-picker-list-font-color-active;
      }
    }
  }

  &-year-scroller &-selected {
    button {
      color: @veui-date-picker-list-font-color-selected;
      font-weight: @veui-date-picker-list-font-weight-selected;
      background-color: @veui-date-picker-list-background-color-selected;

      &:hover {
        color: @veui-date-picker-list-font-color-selected-hover;
      }

      &.focus-visible {
        color: @veui-date-picker-list-font-color-selected-focus;
      }

      &:active {
        color: @veui-date-picker-list-font-color-selected-active;
      }
    }
  }

  &[ui~="s"] {
    font-size: @veui-date-picker-font-size-s;
    .make-date-panel-width(@veui-date-picker-cell-width-s);
    .@{veui-prefix}-calendar-panel {
      .size(@date-panel-width, auto);
      & + .@{veui-prefix}-calendar-panel {
        padding-left: 0;
        width: @date-panel-width;
      }
      &::before {
        .make-header-height(@veui-date-picker-font-size-s);
        .absolute(veui-sum(@header-height, -1px), 0, _, 0);
      }
    }
    &.@{veui-prefix}-calendar-type-month .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-date-picker-inputs {
      width: veui-sum(@date-panel-width, -@veui-date-picker-year-scroller-width);
    }

    &.@{veui-prefix}-calendar-type-year .@{veui-prefix}-calendar-panel,
    &.@{veui-prefix}-calendar-type-month .@{veui-prefix}-calendar-panel {
      & + .@{veui-prefix}-calendar-panel {
        width: veui-sum(
          @date-panel-width,
          -@veui-date-picker-year-scroller-width,
          @veui-date-picker-range-panel-spacing
        );
      }
    }
  }

  &[ui~="s"] &-table button {
    .size(auto, @veui-date-picker-cell-height-s);
  }
  &[ui~="s"] &-date-table button {
    .size(@veui-date-picker-cell-width-s, @veui-date-picker-cell-height-s);
  }

  &[ui~="s"] &-month-table button {
    width: @veui-date-picker-width-month-button-s;
  }
  &[ui~="s"] &-year-table button {
    width: @veui-date-picker-width-month-button-s;
  }

  &[ui~="s"] &-year-scroller {
    button {
      .centered-line(@veui-date-picker-list-item-height-s);
    }
  }

  &-type-date[ui~="s"] &-body {
    .make-day-body-height(
      @veui-date-picker-font-size-s,
      @veui-date-picker-cell-height-s
    );
    height: @day-body-height;
  }

  &-type-month[ui~="s"] &-body {
    .make-month-body-height(
      @veui-date-picker-font-size-s,
      @veui-date-picker-cell-height-s
    );
    height: @month-body-height;
  }

  &-type-year[ui~="s"] &-body {
    .make-year-body-height(
      @veui-date-picker-font-size-s,
      @veui-date-picker-cell-height-s
    );
    height: @year-body-height;
  }
}