/*
 * This file is part of TREB.
 *
 * TREB is free software: you can redistribute it and/or modify it under the 
 * terms of the GNU General Public License as published by the Free Software 
 * Foundation, either version 3 of the License, or (at your option) any 
 * later version.
 *
 * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
 * details.
 *
 * You should have received a copy of the GNU General Public License along 
 * with TREB. If not, see <https://www.gnu.org/licenses/>. 
 *
 * Copyright 2022-2026 trebco, llc. 
 * info@treb.app
 * 
 */


@use './defaults.scss' as *;
@use './z-index.scss' as *;

@use './grid.scss';
@use './theme-defaults.scss';
@use './dark-theme.scss';
@use '../../treb-charts/style/charts.scss';
@use './dialog.scss';
@use './spinner.scss';
@use './treb-icons.scss';
@use './toolbar.scss';
@use './font-stacks.scss';

/*
 * switching to a double-selector to increase specificity. the particular
 * issue we were running into was some general :where ... :is selectors that 
 * were breaking into our styles. this is not optimal but it does prevent
 * at least inadvertent overrides.
 */
.treb-main.treb-main {

  /*============================================================================
   *
   * Reset
   * 
   * Since we cannot use a shadow DOM, we're using this reset to start from
   * a blank-ish slate. Using `revert` should reset styles back to the browser
   * stylesheet (or user stylesheet, if anyone actually does that).
   *
   * Per MDN, "revert is just a value" -- so it can still be overridden by
   * specificity. So it is possible for styles to leak in. We're encapsulating
   * everything so there's not a lot of concern about leaking out. Once we are 
   * three-four levels deep in specificity we probably don't need to worry too 
   * much above stuff leaking in, so the first couple of layers should use 
   * prefixed names just to be sure, and wrap up all the styles.
   * 
   * Known issues (WIP)
   * 
   * this reset breaks contenteditable on chrome, because it unsets the 
   * css property "-webkit-user-modify", which should be "read-write".
   *
   * that's a nonstandard property which is no longer in use (?) but gets
   * set by the contenteditable attribute. chrome/webkit is probably using 
   * this internally to manage editability.
   *
   * it seems like the attribute should take priority over our reset. not sure 
   * why it does not. in any event the fix _seems_ to be setting that property 
   * on contenteditable elements. I say _seems_ because it is working, but we 
   * should keep an eye out for stability issues. 
   * 
   * [update] firefox has the same issue, same fix but with a -moz prefix.
   * weird how that works.
   *
   *===========================================================================*/

  all: revert;
  box-sizing: border-box;

  // text-align does not revert? it should be covered by all...
  // or is the problem that there's no initial value? (although 
  // unset does not work either)
  
  text-align: start;

  // set a default font, as well. we used to inherit but that
  // does not necessarily make sense.

  font-family: var(--treb-default-font, system-ui, $font-stack);

  // reset in case we inherit something

  line-height: normal;

  // ---------------------------------------------------------------------------

  color-scheme: var(--treb-color-scheme, unset);

  font-family: $font-stack;

  font-style: normal;
  font-weight: normal;
  color: inherit;
  font-size: 14px; // ?

  height: 100%;
  width: 100%;

  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr) auto;
  // gap: 1em;

  // ---------------------------------------------------------------------------

  div, button, input, ul, ol, li, a, textarea, svg {

    // maybe this is being too aggressive. we could be a little 
    // more specific about what we unset in order to avoid any 
    // unexpected side effects.

    all: revert;
    
    box-sizing: border-box;
    font-family: var(--treb-default-font, system-ui, $font-stack);

  }

  // addressing some specific problems... increased specificity

  // &.treb-main svg { all: revert; }
  // &.treb-main div { margin: revert; }

  /**
   * this is kind of a global property but we don't actually want
   * to inherit from the page, so we should set a font explicitly
   * here (in fact that should be the treb UI font).
   */
  button, input {
    font: inherit;
    color: inherit;
  }

  * {
    box-sizing: border-box;
  }

  /**
   * fix for chrome (webkit?) and also firefox
   */
  [contenteditable] {
    -webkit-user-modify: read-write;
    -moz-user-modify: read-write;
  }

  // ---------------------------------------------------------------------------


  &[animate] {
    .treb-layout-header {
      transition: height var(--treb-sidebar-transition, .2s ease), 
                  opacity var(--treb-sidebar-transition, .2s ease);
    }    
  }

  .treb-layout-header {
    grid-row: 1;
    grid-column: 1/3;
    height: 1px;
    opacity: 0;
  }

  /**
   * toolbar is visible when attribute is set
   */
  &[toolbar] {
    .treb-layout-header {
      height: 42px;
      opacity: 1;
    }
  }

  /**
   * dialog is visible when attribute is set. when dialog 
   * is visible, we want to fade all content -- including
   * toolbar, which also uses opacity (above) so we need
   * to out-specify
   */
  &[dialog] {

    & > *, .treb-layout-header {
      opacity: .6;
    }

    .treb-dialog-mask {
      pointer-events: auto;
      opacity: 1;
    }

  }

  .treb-layout-spreadsheet {

    grid-row: 2;
    grid-column: 1;
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: row;
    gap: 1em;
    transition: opacity .2s ease;

    // why was this here?
    // overflow: hidden;

    // FIXME: move up (or not needed?)
    // line-height: normal;
    // text-align: left;
  
  }

  .treb-views.treb-can-revert .treb-view {
    .treb-revert-indicator {
      opacity: 1;
      pointer-events: initial;
    }
  }

  .treb-view {

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    flex: 1 1 0px;

    // why was this here?
    // overflow: hidden;

    .treb-spreadsheet-backdrop {
      grid-row: 2;
      grid-column: 1;
      z-index: 2;
      box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
    }

    .treb-spreadsheet-body {
      z-index: 4;
      position: relative;
    }

    .treb-spreadsheet-footer {
      z-index: 5;
      position: relative;
    }

    .treb-layout-resize-handle {
      display: none;
    }

    .treb-revert-indicator {
      display: none;
    }

    &:first-of-type {

      .treb-revert-indicator {
        display: block;
        grid-area: 2/1/3/2; // overlap the grid body
        justify-self: start;
        align-self: start;
        width: 1rem;
        height: 1rem;
        position: relative;
        overflow: hidden;
        opacity: 0;
        transition: opacity .125s ease;
        pointer-events: none;

        /* rounded style
        &::after {
          content: '';
          position: absolute;
          display: block;
          top: -1rem;
          left: -1rem;
          border-radius: 1rem;
          border: 1rem solid orange;
        }
        */

        /* triangular style */

        border: .5em solid orange;
        border-right-color: transparent;
        border-bottom-color: transparent;

        /* end styles */

        z-index: 20; // FIXME: use stack
      }

    }

    &:last-of-type {

      .treb-layout-resize-handle {
        
        display: block;
        grid-area: 2/1/3/2; // overlap the grid body
        justify-self: end;
        align-self: end;

        border: .5rem solid var(--treb-resize-handle-color, #0059B9);
        border-top-color: transparent;
        border-left-color: transparent;

        z-index: 20; // FIXME: use stack

        width: 1rem;
        height: 1rem;

        cursor: nw-resize;

      }
    }

  }

  /*
  .treb-layout-resize-container {
    overflow: hidden;
    position: relative;
    display: flex;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .4);
    flex-grow: 1;
  }
  */

  &[animate] {
    .treb-layout-sidebar {
      transition: width var(--treb-sidebar-transition, .2s ease), 
                opacity var(--treb-sidebar-transition, .2s ease);
    }
  }

  .treb-layout-sidebar {

    // we're using fixed sizes for buttons, but then ems for spacing.
    // that is not good.

    grid-row: 2;
    grid-column: 2;

    padding-top: 1rem;
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    justify-content: flex-start;
    overflow: hidden;
    width: 2.5rem;

    padding-top: 3rem;
    width: 3rem;

    align-items: center;

  }

  &[collapsed] {
    .treb-layout-sidebar {
      width: 0px;
      opacity: 0;
    }

    .treb-toggle-sidebar-button {
    
        border-color: var(--treb-toolbar-border-color, var(--treb-ui-border-color, rgb(209, 213, 219)));
        border-right-color: var(--treb-toolbar-button-background, transparent);
        right: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background: var(--treb-toolbar-button-background, #fff);
        &::after {
          mask-image: var(--icon-chevron-left);
          -webkit-mask-image: var(--icon-chevron-left);
        }
    
    }
  }

  .treb-layout-sidebar > button, .treb-toggle-sidebar-button {

    // all: initial;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;

    &::after {
      display: block;
      height: 24px;
      width: 24px;
      content: '';
      background: #ccc; // FIXME
      mask-position: center;
      -webkit-mask-position: center;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      transition: background-color 0.1s ease;
      mask-image: var(--icon);
      -webkit-mask-image: var(--icon);
    }
  
    // working on how to alter the revert button depending on state...
    // remove hover effect? remove the button? (...)

    /*
    &:not(.sidebar-disabled):hover::after{
      background: #666; // FIXME
    }
    */

    &[data-can-revert=false] {
      display: none;
    }

    &:hover::after {
      background: #666; // FIXME
    }

    &[data-command=recalculate] {
      --icon: var(--icon-reset);
    }

    &[data-command=toggle-toolbar] {
      --icon: var(--icon-toolbar);
    }

    &[data-command=revert] {
      --icon: var(--icon-revert);
    }

    &[data-command=export-xlsx] {
      --icon: var(--icon-export);
    }

    &[data-command=about] {
      --icon: var(--icon-about);
    }
   
  }

  .treb-toggle-sidebar-button {

    position: absolute;
    right: .5rem;
    bottom: 6rem;
    background: transparent;
    border: 0;
    border: 1px solid transparent;
    height: 24px;
    width: 24px;

    right: calc(1.5rem - 12px);

    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;

    z-index: $z-index-note;

    &::after {
      height: 12px;
      width: 12px;
      mask-image: var(--icon-chevron-right);
      -webkit-mask-image: var(--icon-chevron-right);
    }

  }


  // these are (atm) outside of the container because we want them
  // to be able to float over any outside content as well... what's the
  // rule with that? something about stacking contexts? of course we're
  // always goint to be fighting z-indexes.
  //
  // ...possible to use a dialog element? TODO: investigate...
  //

  // OK, but then we can't scope properly. so no.

  .treb-resize-rect {
    // all: initial;
    z-index: 9998; // ugh
    position: fixed;
    top: 0px;
    left: 0px;
    border: 1px dotted var(--treb-resize-frame-color, blue);
    width: 100%;
    height: 100%;
    display: block;
  }

  .treb-resize-mask {
    // all: initial;
    z-index: 9999; // ugh
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
  }

}