@import '../global';

/**
 * @class Ext.dataview.List
 */

/**
 * @var {color} $list-color
 * Text color for list rows.
 */
$list-color: #000 !default;

/**
 * @var {color} $list-bg-color
 * Background-color for list rows.
 */
$list-bg-color: #f7f7f7 !default;

/**
 * @var {color} $include-list-highlights
 * Optionally disable all list gradients, text-shadows, and box-shadows. Useful for CSS debugging,
 * non-performant browsers, or minimalist designs.
 */
$include-list-highlights: $include-highlights !default;

/**
 * @var {boolean} $list-zebrastripe
 * Optionally zebra-stripe the list (alternating background colors).
 */
$list-zebrastripe: false !default;

/**
 * @var {color} $list-pressed-color
 * Background-color for pressed list rows.
 */
$list-pressed-color: lighten($active-color, 50%) !default;

/**
 * @var {color} $list-active-color
 * Background-color for selected list rows.
 */
$list-active-color: $active-color !default;

/**
 * @var {string} $list-active-gradient
 * Gradient style for selected list rows.
 */
$list-active-gradient: $base-gradient !default;

/**
 * @var {color} $list-header-bg-color
 * Background-color for list header rows (in grouped lists).
 */
$list-header-bg-color: lighten(saturate($base-color, 10%), 20%) !default;

/**
 * @var {string} $list-header-gradient
 * Gradient style for list header rows (in grouped lists).
 */
$list-header-gradient: $base-gradient !default;

/**
 * @var {measurement} $list-disclosure-size
 * Default size (width/height) for disclosure icons.
 */
$list-disclosure-size: 1.7em;

/**
 * @var {measurement} $list-disclosure-round-size
 * Default size (width/height) for disclosure icons in a list with a `round` ui.
 */
$list-disclosure-round-size: 1.5em;

/**
 * @var {measurement} $list-round-padding
 * Default padding for lists with a `round` ui.
 */
$list-round-padding: 13px !default;

/**
 * Includes default list styles.
 */
@mixin sencha-list {
  .x-list {
    position: relative;
    background-color: $list-bg-color;
    overflow: hidden;

    .x-list-inner {
      width: 100% !important;
    }

    .x-list-disclosure {
      overflow: visible;
      -webkit-mask: 0 0 theme_image($theme-name, "disclosure.png") no-repeat;
      -webkit-mask-size: $list-disclosure-size;
      @include background-gradient(saturate($active-color, 10%));
      width: $list-disclosure-size;
      height: $list-disclosure-size;
      margin: 0.5em 0.5em 0 0;
    }

    .x-list-emptytext {
      text-align: center;
      pointer-events: none;
      font-size: #333333;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-box-pack: center;
    }

    &.x-list-indexed .x-list-disclosure {
      margin-right: 1.8em;
    }

    .x-item-selected .x-list-disclosure {
      background: #fff none;
    }

    .x-list-scrolldock-hidden {
      display: none;
    }

    .x-list-item {
      position: absolute !important;
      left: 0;
      top: 0;
      color: $list-color;
      width: 100%;

      &.x-item-pressed {
        .x-dock-horizontal {
          background: $list-pressed-color none;
        }
      }

      &.x-item-selected .x-dock-horizontal {
        @include background-gradient($list-active-color, $list-active-gradient);
        @include color-by-background($list-active-color);
        @include bevel-by-background($list-active-color);
      }

      > .x-dock {
        height: auto;
      }
    }
  }

  .x-list-item-body {
    min-height: $global-list-height;
    padding: 0.65em 0.8em;
  }

  .x-list-header-swap {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2 !important;
  }

  .x-ios .x-list-header-swap {
    @include transform(translate3d(0, 0, 0));
  }

  .x-list-item .x-list-header {
    display: none;
  }

  .x-list-grouped .x-list-header-wrap .x-list-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
  }

  .x-list-normal {
    &.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
        padding-top: 26px;
    }

    .x-list-header-wrap .x-item-header,
    .x-list-header {
      @include background-gradient($list-header-bg-color, $list-header-gradient);
      @include color-by-background($list-header-bg-color, 30%);
      @include bevel-by-background($list-header-bg-color);
      border-top: 1px solid $list-header-bg-color;
      border-bottom: 1px solid darken($list-header-bg-color, 20%);
      font-weight: bold;
      font-size: 0.8em;
      padding: 0.2em 1.02em;
      @include bevel-by-background($list-header-bg-color);
    }

    @if $list-zebrastripe {
      .x-list-item {
        .x-dock-horizontal {
          border-top: 1px solid transparent;
        }

        &:nth-child(even) .x-dock-horizontal {
          background-color: darken($list-bg-color, 5%);
        }

        &.x-list-footer-wrap:nth-child(odd) .x-dock-horizontal {
          border-bottom: 1px solid darken($list-bg-color, 5%);
        }
      }
    } @else {
      .x-list-item {
        .x-dock-horizontal {
          border-top: 1px solid darken($list-bg-color, 10%);
        }

        &.x-list-footer-wrap .x-dock-horizontal {
          border-bottom: 1px solid darken($list-bg-color, 10%);
        }
      }
    }

    .x-list-item {
      @if $include-list-highlights {
        &.x-item-pressed .x-dock-horizontal {
            border-top-color: $list-pressed-color;
            background-color: $list-pressed-color;
        }

        &.x-item-selected .x-dock-horizontal {
            border-top-color: $list-active-color;
            border-bottom: 1px solid darken($list-active-color, 15%);
        }
      }
    }
  }

  .x-list-normal.x-list-grouped .x-list-item.x-list-header-wrap .x-dock-horizontal {
    border-top: 0;
  }

  .x-list-round {
    &.x-list-grouped .x-list-header-wrap .x-dock-horizontal {
      padding-top: 31px;
    }

    .x-scroll-view {
      background-color: #eee !important;
      // @todo No !important plz
    }

    .x-list-header-swap {
      padding-right: $list-round-padding;
    }

    .x-list-inner .x-scroll-container {
        top: $list-round-padding;
        left: $list-round-padding;
        bottom: $list-round-padding;
        right: $list-round-padding;
        width: auto !important;
        height: auto !important;
    }

    .x-list-disclosure {
      overflow: hidden;
      -webkit-mask: 0 0 theme_image($theme-name, "disclosure2.png") no-repeat;
      -webkit-mask-size: $list-disclosure-round-size;
      @include background-gradient(lighten(desaturate($base-color, 10), 10));
      width: $list-disclosure-round-size;
      height: $list-disclosure-round-size;
      margin: 0.5em 0.5em 0 0;
    }

    .x-list-header {
      color: #777;
      font-size: 1em;
      font-weight: bold;
      padding-left: 26px;
      line-height: 1.7em;
      //      background: rgba(238,238,238,.8);
      @include background-image(linear-gradient(top, rgba(238, 238, 238, 1), rgba(238, 238, 238, .9) 30%, rgba(238, 238, 238, .4)));
    }

    .x-list-container {
      padding: $list-round-padding $list-round-padding 0 $list-round-padding;

      .x-list-header {
        padding-left: $list-round-padding;
        background-image: none;
      }
    }

    &.x-list-ungrouped,
    &.x-list-grouped {
      .x-list-item .x-dock-horizontal {
        //border: solid #DDDDDD;
        border: 1px solid darken($list-bg-color, 10%);
        border-width: 1px 1px 0 1px;
        background: $list-bg-color;
      }
    }

    &.x-list-ungrouped {
      .x-list-item {
        &:first-child {
          @if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
        }

        &:last-child {
          @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
          border-width: 1px;

          margin-bottom: $list-round-padding;
        }
      }
    }

    &.x-list-grouped {
      .x-list-header-wrap {
        .x-dock-horizontal {
          @if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
        }

        .x-list-header {
          border: 1px solid darken($list-bg-color, 10%);
          border-width: 1px 1px 0 1px;
          @if $include-border-radius { @include border-top-radius($form-fieldset-radius); }
        }
      }

      .x-list-footer-wrap {
        background: transparent;

        .x-dock-horizontal {
          border: none;
          background: transparent;
          padding-bottom: $list-round-padding;

          > .x-dock-body {
            border: 1px solid darken($list-bg-color, 10%);
            background: $list-bg-color;
            @if $include-border-radius { @include border-bottom-radius($form-fieldset-radius); }
          }
        }
      }
    }
  }

  .x-dataview-inlineblock {
    .x-dataview-item, .x-data-item {
      display: inline-block !important;
    }
  }

  .x-dataview-nowrap {
    .x-dataview-container {
      white-space: nowrap !important;
    }
  }

  .x-list-inlineblock {
    .x-list-item {
      display: inline-block !important;
    }
  }

  .x-list-nowrap {
    .x-list-inner {
      width: auto;
    }
    .x-list-container {
      white-space: nowrap !important;
    }
  }
}

@mixin sencha-list-paging {
  .x-list-paging {
    padding: 1em 0;
    .x-loading-spinner {
      display: none;
      margin: auto;
    }

    .x-list-paging-msg {
      text-align: center;
      color: $active-color;
      clear: both;
      @if $include-border-radius { @include border-radius(6px); }
    }

    &.x-loading {
      padding: 0.5em;

      .x-loading-spinner {
        display: block;
      }

      .x-list-paging-msg {
        display: none;
      }
    }
  }
}

@mixin sencha-list-pullrefresh {
  .x-list-pullrefresh {
    @include display-box;
    @include box-orient(horizontal);
    @include box-align(center);
    @include box-pack(center);
    position: absolute;
    top: -5em;
    left: 0;
    width: 100%;
    height: 4.5em;

    .x-loading-spinner {
      display: none;
    }
  }

  .x-list-pullrefresh-arrow {
    width: 2.5em;
    height: 4.5em;

    background: center center theme_image($theme-name, "pullarrow.png") no-repeat;
    background-size: 2em 3em;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 200ms;
    @include rotate(0deg);
  }

  .x-android-2 .x-list-pullrefresh-arrow {
    -webkit-transition-property: none;
    -webkit-transition-duration: 0;
  }

  .x-list-pullrefresh-release .x-list-pullrefresh-arrow {
    @include rotate(-180deg);
  }

  .x-list-pullrefresh-wrap {
    width: 20em;
    font-size: 0.7em;
  }

  .x-list-pullrefresh-message {
    font-weight: bold;
    font-size: 1.3em;
    margin-bottom: 0.1em;
    text-align: center;
  }

  .x-list-pullrefresh-updated {
    text-align: center;
  }

  .x-list-pullrefresh-loading {
    *.x-loading-spinner {
      display: block;
    }

    .x-list-pullrefresh-arrow {
      display: none;
    }
  }

  .x-android-2 .x-list-pullrefresh-loading {
    *.x-loading-spinner {
      display: none;
    }
  }
}