<wxs src="./action-sheet.wxs" module="_this" />
<wxs src="../common/utils.wxs" module="_" />
<import src="./template/grid.wxml" />
<import src="../common/template/icon.wxml" />

<view
  id="{{classPrefix}}"
  style="{{_._style([style, customStyle])}}"
  class="{{_.cls(classPrefix, [align, theme, ['no-description', !description]])}} class {{prefix}}-class"
>
  <t-popup
    visible="{{visible}}"
    placement="bottom"
    usingCustomNavbar="{{usingCustomNavbar}}"
    bind:visible-change="onPopupVisibleChange"
    show-overlay="{{showOverlay}}"
    z-index="{{ popupProps.zIndex || defaultPopUpzIndex }}"
    overlay-props="{{ popupProps.overlayProps || defaultPopUpProps }}"
  >
    <view class="{{classPrefix}}__content {{prefix}}-class-content" tabindex="0">
      <view wx:if="{{description}}" tabindex="0" class="{{classPrefix}}__description">{{description}}</view>
      <block wx:if="{{gridThemeItems.length}}">
        <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
      </block>
      <view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
        <block wx:for="{{ items }}" wx:key="index">
          <view
            data-index="{{index}}"
            style="{{ item.color ? 'color: ' + item.color : '' }}"
            class="{{_.cls(classPrefix + '__list-item', [['disabled', item.disabled]])}}"
            bind:tap="onSelect"
            aria-role="{{ariaRole || 'button'}}"
            aria-label="{{item.label || item}}"
            tabindex="0"
          >
            <view class="{{classPrefix}}__list-item-content">
              <template
                wx:if="{{_this.getIconData(item.icon)}}"
                is="icon"
                data="{{tClass: classPrefix + '__list-item-icon', ..._this.getIconData(item.icon)}}"
              />
              <view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
              <template
                wx:if="{{_this.getIconData(item.suffixIcon)}}"
                is="icon"
                data="{{tClass: classPrefix + '__list-item-icon--suffix', ..._this.getIconData(item.suffixIcon)}}"
              />
            </view>
            <view wx:if="{{item.description}}" class="{{classPrefix}}__list-item-desc">{{item.description}}</view>
          </view>
        </block>
      </view>
    </view>
    <slot />
    <view wx:if="{{showCancel}}" class="{{classPrefix}}__footer">
      <view class="{{classPrefix}}__gap-{{theme}}" />
      <view
        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
        hover-class="{{classPrefix}}__cancel--hover"
        hover-stay-time="70"
        bind:tap="onCancel"
        aria-role="button"
      >
        {{ cancelText || globalConfig.cancel }}
      </view>
    </view>
  </t-popup>
</view>
