//
// Copyright 2019 Stijn de Witt. Some rights reserved.
// Licensed under the MIT Open Source license. 
// https://opensource.org/licenses/MIT
// See LICENSE for details.
//
// Based on code copyright 2018 Google Inc. All Rights Reserved.
// Licensed under the Apache License, Version 2.0.
// http://www.apache.org/licenses/LICENSE-2.0
// See LICENSE-MDC for details.
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under these licenses is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the licenses for the specific language governing permissions and
// limitations under these licenses.
// 

@import "../animation/functions";
@import "../animation/variables";
@import "../theme/mixins";
@import "../theme/variables";
@import "../typography/mixins";


@mixin drawer-fill-color($color) {
  @include mdc-theme-prop(background-color, $color);
}


@mixin drawer-ink-color($color) {
  @include mdc-theme-prop(color, $color);
}


@mixin drawer-scrim-color($color, $opacity) {
  &::before {
    background-color: rgba(mdc-theme-prop-value($color), $opacity);
  }
}


@mixin drawer-fill-color-accessible($color) {
  @include drawer-ink-color(mdc-theme-accessible-ink-color($color));
  @include drawer-fill-color($color);
}


@mixin solid_drawer_base() {
  @include drawer-ink-color($drawer-ink-color);
  @include drawer-fill-color($drawer-fill-color);
  @include typography(subtitle1);  

  &:not(.end) {
    float: left;
    @include mdc-rtl {
      float: right;
    }
    >label {
      @include mdc-rtl-reflexive-position(left, 0);
    }
  }

  &.end {
    float: right;
    @include mdc-rtl {
      float: left;
    }
    >label {
      @include mdc-rtl-reflexive-position(right, 0);
    }
  }

  // this breaks faux borders
  // position: relative; 

  // cannot use this with fixed right drawer
  // overflow: hidden;

  /*
  .item {
    @include typography(subtitle2);

    position: relative;
    outline: none;
    color: inherit;
    text-decoration: none;
  }
  */

  .graphic {
    color: rgba(0, 0, 0, .54);
  }
  
  >div {
    >div {
      // this breaks faux borders
      // position: relative;
      overflow: hidden;

      >nav {
        width: $drawer-width;
        box-sizing: border-box;
        display: inline-flex;
        flex-direction: column;
        flex: 0 0 auto;
        vertical-align: top;

        >header {
          display: none;
        }
      }

      &::before {
        position: absolute;
        content: '';
        top: $appbar-row-height + 16px;
        bottom: 0;
      }
    }

    &::after {
      content:'';
      display: block;
      height: 1px;
    }
  }

  >label {
    position: absolute;
    top: 0;
    padding: $appbar-section-vertical-padding 0 $appbar-section-vertical-padding $appbar-section-horizontal-padding;
    cursor: pointer;
    z-index: 1;
    user-select: none;

    // @include mdc-rtl-reflexive-position(left, 0);
    // left: 0;
    // @include mdc-rtl {
    //   right: 0;
    // }
      
    >a {
//      @include appbar-icon_;
//      @include appbar-fill-color-accessible(primary);
//      @include appbar-ink-color(mdc-theme-accessible-ink-color($appbar-fill-color));
    }
  }

  >input[type=checkbox] {
    display:none;
  }

  // right-hand side drawer (in ltr)
  &.end {
    >label {
      padding: $appbar-section-vertical-padding $appbar-section-horizontal-padding $appbar-section-vertical-padding 0;
    }
      /*
    float: right;
    @include mdc-rtl {
      float: left;
    }
    >label {
      z-index: 0;
      right: 0;
      left: initial;
      @include mdc-rtl {
        left: 0;
        right: initial;
      }
    }
    */
  }

  &.fixed.end {
    z-index: 1;

    /*
    >label {
      top: -($appbar-row-height + 16px);
    }
    */
  }

  &:not(.fixed) >div >div::before,
  &.fixed >div >div {
    border-top: 1px solid #e4e4e4;
  }
}


@mixin solid_drawer_permanent() {
  display: inline-flex;

  >div {
    // @include mdc-rtl-reflexive-box(border, right, 1px solid #e4e4e4);
    // overflow: hidden;
  }

  &.floating {
    >div {
//      @include mdc-rtl-reflexive-box(border, right, none);
      background: none;
    }
  }

  // right-hand side drawer (in ltr)
  &.end {
    >div {
//      @include mdc-rtl-reflexive-box(border, left, 1px solid #e4e4e4);
    }

    &.floating {
      >div {
//        @include mdc-rtl-reflexive-box(border, left, none);
      }
    }
  }
}


@mixin solid_drawer_persistent() {
  >div >div,
  >div >div::before {
    width: 0;
    will-change: width;
    transition: width $drawer-transition-duration;
  }

  &:not(.end) {
    &:not(.fixed) >div >div::before,
    &.fixed >div >div {
        //    @include mdc-rtl-reflexive-box(border, right, 1px solid #e4e4e4);
      background: linear-gradient(to left, #e4e4e4 1px, $drawer-fill-color 2px);
      @include mdc-rtl {
        background: linear-gradient(to right, #e4e4e4 1px, $drawer-fill-color 2px);
      }
    }
    >div >div >nav {
      transform: translateX(-$drawer-width);
      @include mdc-rtl {
        transform: translateX($drawer-width);
      }
    }
  }

  &.end {
    &:not(.fixed) >div >div::before,
    &.fixed >div >div {
        //    @include mdc-rtl-reflexive-box(border, right, 1px solid #e4e4e4);
      background: linear-gradient(to right, #e4e4e4 1px, $drawer-fill-color 2px);
      @include mdc-rtl {
        background: linear-gradient(to left, #e4e4e4 1px, $drawer-fill-color 2px);
      }
    }
    >div >div >nav {
      transform: translateX($drawer-width);
      @include mdc-rtl {
        transform: translateX(-$drawer-width);
      }
    }
  }
  
  >div >div >nav {
    will-change: transform;
    transition: transform $drawer-transition-duration - 10ms; // transition a bit faster, to prevent flicker on Firefox.
  }
  
  >input[type=checkbox].temporary + label {display: none;}
  >input[type=checkbox].persistent {
    &:not(:checked) {
      &~ div >div {
        width: $drawer-width;

        &>nav {
          transform: translateX(0);
        }

        &::before {
          width: $drawer-width;
        }
      }
    }
  }

  &.floating {
    >input[type=checkbox].persistent {
      &:not(:checked) ~ div >div {
//        @include mdc-rtl-reflexive-box(border, right, none);
      }
    }
  }

  &.fixed {
    position: sticky;
    top: 16px;
    z-index: 1;

    >div >div {
      height: calc(100vh - 16px - 1px);
      margin-bottom: -$appbar-row-height;

      &::before {
        top: 0;
      }
    }
  }

  // right-hand side drawer (in ltr)
  &.end {
    >div >div {
      /*
      transition: width $drawer-transition-duration;
      >nav {
        transform: translateX($drawer-width);
        @include mdc-rtl {
          transform: translateX(-$drawer-width);
        }
      }
      */
    }
    /*
    &:not(.fixed) >div >div::before,
    &.fixed >div >div {
      // @include mdc-rtl-reflexive-box(border, left, 1px solid #e4e4e4);
      // simulate a border using linear-gradient 
      background: linear-gradient(to right, #e4e4e4 1px, $drawer-fill-color 2px);
    }
    */
  }
}


@mixin solid_drawer_temporary() {
  position: absolute;

  &:not(.end) {

    >div {
      @include mdc-rtl-reflexive-position(left, 0);
      transform: translateX(-$drawer-width);
      @include mdc-rtl {
        transform: translateX($drawer-width);
      }
    }
  }

  &.end {
    right:0;

    >div {
      @include mdc-rtl-reflexive-position(right, 0);
      transform: translateX($drawer-width);
      @include mdc-rtl {
        transform: translateX(-$drawer-width);
      }
    }
  }

  >label {
    background: rgba(0,0,0,0);
    will-change: background;
    transition: background $drawer-transition-duration - 50ms; // transition a bit faster, to prevent 'afterglow' of label in button form
  }

  >div {
    width: $drawer-width;
    position: fixed;
    top: 0;
    bottom: 0;
    @include drawer-fill-color($drawer-fill-color);
    @include drawer-ink-color($drawer-ink-color);
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 3;
    will-change: transform;
    transition: transform 250ms;

    >div {
      height: 100vh;
      
      >nav {
        position: sticky; // stick to top so it does not scroll
        top: 0;
        height: 100vh;
        >header {
          display: block;
          position: relative;
          &:before {
            content: '';
            display: block;
            padding-top: 56.25%;
          }
          >div {
            display: flex;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: flex-end;
            box-sizing: border-box;
            padding: 16px;
            @include drawer-fill-color($drawer-header-fill-color);
            @include drawer-ink-color($drawer-header-ink-color);
          }
        }
      }
    }
  }

  input[type=checkbox].persistent + label {display:none}
  input[type=checkbox].temporary ~ div > div {
    // make this element a scroll-blocking layer
    overflow-x: hidden;
    overflow-y: auto;
    height: 100% !important;
    width: calc(100% + 30px) !important;
    overscroll-behavior: contain;
  }

  input[type=checkbox].temporary:checked ~ div {
    transform: translateX(0);
    // make sure there is tall content to force a scrollbar
    >div {
      width: $drawer-width;

      &::before {
        width: $drawer-width;
      }
      &::after {
        content: '';
        display: block;
        height: 10000px;
      }
      &>nav {
        transform: translateX(0);
      }
    }
  }

  &.end {
//    @include mdc-rtl-reflexive-position(right, 0);

    >div {
//      @include mdc-rtl-reflexive-position(right, 0);
//      @include mdc-rtl-reflexive-box(border, left, 1px solid #e4e4e4);

/*
      transform: translateX($drawer-width);
      @include mdc-rtl {
        transform: translateX(-$drawer-width);
      }
*/
    }    
  }

  >input[type=checkbox].temporary {
    &:checked {
      &~ label {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 0;
        background: rgba(mdc-theme-prop-value($drawer-scrim-color), $drawer-scrim-opacity);
        overflow: hidden;
        cursor: default;
        >a {
          display: block;
          background: transparent;
          padding: 0;
          cursor: default;

          // make this element a scroll-blocking layer
          overflow-x: hidden;
          overflow-y: auto;
          height: 100% !important;
          width: calc(100% + 30px);
          overscroll-behavior: contain;

          > * {
            display: none;
          }
          &:before {
            display: none;
          }
          &:after {
            content: '';
            display: block;
            position: initial;
            height: 10000px;
            width: 10px;
            background: red;
          }
        }
      }
      &~ div {
        box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.6);
        @include mdc-rtl {
          box-shadow: 0px 0px 100px rgba(0, 0, 0, 0.6);
        }
        /*
        >div {
          transform: translateX(0);
        }
        */
      }
    }
  }
/*
  .drawer_button_temporary {
      top: -($appbar-row-height + 16px);
  }
*/
}


@mixin solid_drawer_base_appbar_styles() {
  .solids .appbar {
    &.fixed {
      &~ .drawer.fixed {
        top: $appbar-row-height + 16px;
        >div >div {
          height: calc(100vh - #{$appbar-row-height} - 16px - 1px);
        }
      }
    }

    &.dense {
      &~ .drawer {
        >label {
          padding: 0 0 0 $appbar-section-horizontal-padding;
        }

        &.end {
          >label {
            padding: 0 $appbar-section-horizontal-padding 0 0;
          }
        }

        &.fixed {
          >div >div {
            margin-bottom: -$appbar-dense-row-height;
          }
        }
      }
  /*
      &~ .drawer:not(.fixed) >div >div::before {
        top: $appbar-dense-row-height + 16px;
      }
  */
      /*
      &~ .drawer:not(.fixed) >div >div::before {
        top: $appbar-dense-row-height + 16px;
      }
      */

      &:not(.fixed) { 
        &~ .drawer.fixed >label {
          top: -($appbar-dense-row-height + 16px);
        }
      }

      &.fixed {
        &~ .drawer.fixed {
          top: $appbar-dense-row-height + 16px;
          >div >div {
            height: calc(100vh - #{$appbar-dense-row-height} - 16px - 1px);
          }
        }
      }

      &.prominent {
        &~ .drawer.fixed {
          >div >div {
            margin-bottom: -$appbar-dense-row-height*2;
          }
        }
  /*
        &~ .drawer:not(.fixed) >div >div::before {
          top: $appbar-dense-row-height*2 + 16px;
        }
  */  
        &:not(.fixed) { 
          &~ .drawer.fixed >label {
            top: -($appbar-dense-row-height*2 + 16px);
          }
        }

        &.fixed {
          &:not(.shrink) ~ .drawer.fixed {
            top: $appbar-dense-row-height*2 + 16px;
            >div >div {
              height: calc(100vh - #{$appbar-dense-row-height*2} - 16px - 1px);
            }
          }
          &.shrink ~ .drawer.fixed {
            top: $appbar-dense-row-height + 16px;
            >div >div {
              height: calc(100vh - #{$appbar-dense-row-height} - 16px - 1px);
            }
          }
        }
      }



      /*
      &~ .drawer {
        >label {
          padding: 0 $appbar-section-horizontal-padding;
        }

        >div >div::before {
          top: $appbar-dense-row-height + 16px;
        }

        &.fixed {
          >div >div {
            height: calc(100vh - #{$appbar-dense-row-height} - 16px - 1px);
          }
        }
      }
    
      &.prominent {
        &:not(.fixed) { 
          &~ .drawer {
            >div >div::before {
              top: $appbar-dense-row-height*2 + 16px;
            }
          }
        }
        &.fixed {
          &~ .drawer {
            &.fixed {
              top: $appbar-dense-row-height*2 + 16px;
              >div >div {
                height: calc(100vh - #{$appbar-dense-row-height*2} - 16px - 1px);
              }
            }
          }
        }
      }
      */
    }
  }




  .solids .appbar.prominent {
    &~ .drawer {
      >div >div {
        &::before {
          top: $appbar-prominent-row-height + 16px;
        }
      }
    }
    &~ .drawer.fixed {
      >div >div {
        margin-bottom: -$appbar-prominent-row-height;
      }
    }
/*
    &~ .drawer:not(.fixed) >div >div::before {
      top: $appbar-prominent-row-height + 16px;
    }
*/
    &:not(.fixed) { 
      &~ .drawer.fixed >label {
        top: -($appbar-prominent-row-height + 16px);
      }
    }
    &.fixed {
      &~ .drawer.fixed {
        top: $appbar-prominent-row-height + 16px;
        /*
        >label {
          top: -($appbar-prominent-row-height + 16px);
        } 
        */
        /*
        >div >div {
          height: calc(100vh - #{$appbar-prominent-row-height} - 16px - 1px);
        }
        */
      }
      &:not(.shrink) ~ .drawer.fixed {
        >div >div {
          height: calc(100vh - #{$appbar-prominent-row-height} - 16px - 1px);
        }
      }
      &.shrink ~ .drawer.fixed {
        top: $appbar-row-height + 16px;
        >div >div {
          height: calc(100vh - #{$appbar-row-height} - 16px - 1px);
        }
      }
    }
  }

  // .appbar_prominent {
  //   &~ .solid_drawer {
  //     >label {
  //       top: -($appbar-prominent-row-height + 16px);
  //     }
  //     // &.drawer_fixed {
  //     //   // top: $appbar-prominent-row-height + 16px;
  //     //   // >label {
  //     //   //   top: -($appbar-prominent-row-height + 16px);
  //     //   // }
  //     // }
  //   }
  //   &.appbar_shrink {
  //     &~ .solid_drawer {
  //       &.drawer_fixed {
  //         top: $appbar-row-height + 16px;
  //       }
  //     }
  //   }
  // }

  .solids .appbar.fixed {
    &~ .drawer {
      /*
      &.fixed {
        top: $appbar-row-height + 16px;
        >div >div {
          height: calc(100vh - #{$appbar-row-height} - 16px - 1px);
          &::before {
            top: 0;
          }
        }
      }
      */
      >label {
        position: fixed;
        top: 0;
      }
    }

    /*
    &.appbar_prominent ~ .solid_drawer {
      &.drawer_persistent, 
      &.drawer_temporary,
      &.drawer_responsive {
        .drawer_button_persistent,
        .drawer_button_temporary {
          >a {
            top: -($appbar-prominent-row-height + 16px);
          }
        }
      }
    }
    */
  }

  .solids .appbar {
    &:not(.fixed) {
//      /*
      // persistent drawer only
      // &~ .drawer.fixed >label {
      //   top: -($appbar-row-height + 16px);
      // }
      // &.dense {
      //   &~ .drawer.fixed >label {
      //     top: -($appbar-dense-row-height + 16px);
      //   }
      //   &.prominent {
      //     &~ .drawer.fixed > label {
      //       top: -($appbar-dense-row-height*2 + 16px);
      //     }
      //   }
      // }
      // &.prominent {
      //   &~ .drawer.fixed > label {
      //     top: -($appbar-prominent-row-height + 16px);
      //   }
      // }
//      */
    }
    &.fixed {
      /*
      &~ .drawer.fixed {
        top: $appbar-row-height + 16px;
      }
      */
      /*
      &.dense {
        &~ .drawer.fixed {
          top: $appbar-dense-row-height + 16px;
        }
        &.prominent {
          &~ .drawer.fixed {
            top: $appbar-dense-row-height*2 + 16px;
          }
        }
      }
      &.prominent {
        &:not(.shrink) ~ .drawer.fixed {
          top: $appbar-prominent-row-height + 16px;
        }
        &.shrink ~ .drawer.fixed {
          top: $appbar-row-height + 16px;
        }
      }
      */
    }
  }
}