/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:map';
@use '../core/styles/typography';
@use '../core/styles/theme';
@use '../utils/mixins' as utils;
@use './variables';
@use '../focus-indicator';

@mixin core-styles() {
  .forge-calendar {
    @include base;

    &__header {
      @include header;
    }

    &__footer {
      @include footer;
    }

    &__view {
      @include view;
    }

    &__date-view {
      @include date-view;

      &__row {
        @include date-view-row;
      }
    }

    &__date-grid {
      @include date-grid;
    }

    &__day {
      @include day;
    }

    &__date {
      @include date;

      forge-focus-indicator {
        @include focus-indicator.provide-theme(( shape: 50% ));
      }

      &__inner {
        @include date-inner;
      }

      .forge-calendar--show-today &--today {
          @include date-today;
      }

      .forge-calendar:not(.forge-calendar--readonly) &:not([disabled]) {
        @include date-selectable;
      }

      &--selected {
        @include date-selected;
      }

      &[disabled] {
        @include date-disabled;
      }

      &-spacer {
        @include date-spacer;

        .forge-calendar--fixed-height & {
          @include date-spacer-expanded;
        }
      }
    }

    &__range {
      &:not(.forge-calendar__date-spacer) {
        @include range;

        &.forge-calendar__range--start {
          @include range-start;
        }
  
        &.forge-calendar__range--end {
          @include range-end;
        }
      }

      // This is dependent on dates being divs and date spacers being spans
      &:not(.forge-calendar__range--start):first-of-type {
        @include range-row-start;
      }

      // This is dependent on dates being divs and date spacers being spans
      &:not(.forge-calendar__range--end):last-of-type {
        @include range-row-end;
      }

      .forge-calendar--allow-single-date-range &--start#{&}--end {
        @include range-single-date;
      }
    }

    &__event {
      @include event;
      
      .forge-calendar__date[disabled] & {
        @include event-disabled;
      }

      &--overflow {
        @include event-overflow;
      }
      
      &__wrapper {
        @include event-wrapper;
  
        .forge-calendar__date-spacer & {
          display: none;
        }
      }
    }

    &--rtl {
      .forge-calendar__header forge-icon-button forge-icon {
        @include arrow-rtl;
      }
    }
  }

  #accessible-header {
    @include utils.visually-hidden;
  }

  #month-button forge-icon {
    @include menu-button-icon;

    .forge-calendar--month-menu-open & {
      @include menu-button-icon-open;
    }
  }

  #year-button forge-icon {
    @include menu-button-icon;
    
    .forge-calendar--year-menu-open & {
      @include menu-button-icon-open;
    }
  }
}

@mixin popup-context-styles() {
  --forge-calendar-event-stroke-color: #{theme.variable(surface-bright)};
}

@mixin host() {
  --forge-calendar-event-stroke-color: #{theme.variable(surface)};

  display: inline-block;
}

@mixin base() {
  width: var(--forge-calendar-width, variables.$width);
  height: fit-content;
  position: relative;
}

@mixin header() {
  padding: var(--forge-calendar-controls-padding, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin arrow-rtl() {
  transform: rotate(180deg);
}

@mixin menu-button-icon() {
  transition: transform 200ms;
}

@mixin menu-button-icon-open() {
  transform: rotate(180deg);
}

@mixin footer() {
  padding: var(--forge-calendar-controls-padding, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

// Views

@mixin view() {
  position: relative;
}

@mixin date-view() {
  display: block;
}

// Dates

@mixin date-view-row() {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

@mixin date-grid() {
  display: grid;
}

@mixin day() {
  @include typography.style(label2);
  @include square-aspect-ratio;

  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
  padding: 0;
  font-weight: bold;
  user-select: none;
}

@mixin date() {
  @include square-aspect-ratio;
  @include date-view-row-gap;

  min-width: 0;
  padding: 0;
  border-radius: 50%;
  position: relative;
  outline: none;
  cursor: default;
  user-select: none;
}

@mixin date-inner() {
  @include typography.style(body1);
  @include date-inner-gap;

  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: inherit;
  box-sizing: border-box;
}

@mixin date-today() {
  &:not([disabled]) {
    color: #{theme.variable(primary)};
    border-color: #{theme.variable(primary)};
  }

  .forge-calendar__date__inner {
    border-color: inherit;
    border-width: variables.$today-border-width;
    border-style: solid;
    font-weight: bold;
  }

  // Override the color when also selected
  &.forge-calendar__date--selected {
    color: #{theme.variable(on-primary)};
  }
}

@mixin date-selectable() {
  cursor: pointer;
}

@mixin date-selected() {
  &:not([disabled]) .forge-calendar__date__inner {
    background-color: #{theme.variable(primary)};
    color: #{theme.variable(on-primary)};
  }

  &[disabled] .forge-calendar__date__inner {
    background-color: #{theme.variable(primary-container-minimum)};
    color: #{theme.variable(text-low)};
  }
  
  forge-focus-indicator {
    @include focus-indicator.provide-theme((
      color: var(--forge-theme-primary-container)
    ));
  }
}

@mixin date-disabled() {
  color: #{theme.variable(text-low)};
}

@mixin date-spacer {
  pointer-events: none;
}

@mixin date-spacer-expanded() {
  @include square-aspect-ratio;
  @include date-view-row-gap;
}

// Range

@mixin range() {
  .forge-calendar__range__target {
    background-color: #{theme.variable(primary)};
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.14;
    border-radius: 0;
  }
}

@mixin range-start() {
  .forge-calendar__range__target {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
}

@mixin range-end() {
  .forge-calendar__range__target {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
  }
}

@mixin range-row-start() {
  .forge-calendar__range__target {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}

@mixin range-row-end() {
  .forge-calendar__range__target {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

@mixin range-single-date() {
  .forge-calendar__range__target {
    transition: transform 200ms;
    transform: scale(1.15);
    transform-origin: center;
  }
}

// Events

@mixin event() {
  @include event-color;
  
  font-size: var(--forge-calendar-event-dot-size, variables.$event-dot-size);
}

@mixin event-overflow() {
  background-color: #{theme.variable(surface)};
  color: #{theme.variable(on-surface)};
  border-radius: 50%;
}

@mixin event-disabled() {
  opacity: 0.14;
}

@mixin event-wrapper() {
  display: flex;
  justify-content: center;
  gap: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 2px;
  pointer-events: none; // Prevents interference with the date click target
}

@mixin event-color() {
  @each $color in variables.$theme-base-strings {
    &[data-event-theme=#{"" + $color}] {
      color: var(--forge-calendar-theme-event-#{$color}-accent, map.get(variables.$theme-values, event-#{$color}-accent));
    }
  }
}

// Utilities

@mixin square-aspect-ratio() {
  &::after {
    float: left;
    padding-top: 100%;
    content: '';
  }
}

@mixin date-view-row-gap() {
  margin-top: var(--forge-calendar-row-gap, variables.$row-gap);
}

@mixin date-inner-gap($force: false) {
  position: absolute;
  width: calc(100% - #{variables.$date-gap}) #{if($force, '!important', '')};
  height: calc(100% - #{variables.$date-gap}) #{if($force, '!important', '')};
  top: calc(#{variables.$date-gap} / 2) #{if($force, '!important', '')};
  left: calc(#{variables.$date-gap} / 2) #{if($force, '!important', '')};
}
