<template>
  <Popup
    :show="props.show"
    :closeable="true"
    :closeIcon="false"
    position="bottom"
    size="auto"
    round
    mask
    v-bind="$attrs"
    @update:show="emit('update:show', $event)"
  >
    <slot :close="onCancelClick">
      <FlexCol width="100%">
        <ShareSheetTitle :title="title" :description="description" />
        <slot name="content">
          <FlexCol v-if="Array.isArray(items[0])" position="relative" wrap>
            <template v-for="(group, k) in (items as ShareSheetItem[][])" :key="k" >
              <ShareSheetButtons
                :items="group"
                :iconSize="iconSize"
                :itemStyle="{ 
                  ...themeStyles.item.value,
                  ...itemStyle, 
                }"
                :itemTextStyle="{
                  ...themeStyles.itemText.value,
                  ...itemTextStyle
                }"
                @click="onItemClick"
              />
              <Divider v-if="k < items.length - 1" />
            </template>
          </FlexCol>
          <ShareSheetButtons
            v-else 
            :items="(items as ShareSheetItem[])"
            :iconSize="iconSize"
            :itemStyle="{ 
              ...themeStyles.item.value,
              ...itemStyle, 
            }"
            :itemTextStyle="{
              ...themeStyles.itemText.value,
              ...itemTextStyle
            }"
            @click="onItemClick"
          />
        </slot>
        <FlexCol v-if="showCancel" position="relative" :innerStyle="themeStyles.viewCancel.value">
          <ShareSheetItem
            :name="props.cancelText || '取消'"
            :bold="themeContext.getVar('ShareSheetCancelBold', false)"
            :color="themeContext.resolveThemeColor('ShareSheetCancelColor', 'text.content')"
            :subname="''"
            :disabled="false"
            @click="onCancelClick"
          />
        </FlexCol>
      </FlexCol>
    </slot>
  </Popup>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize, DynamicSize2 } from '../theme/ThemeTools';
import ShareSheetItem from '../dialog/ActionSheetItem.vue';
import ShareSheetTitle from '../dialog/ActionSheetTitle.vue';
import Popup, { type PopupProps } from '../dialog/Popup.vue';
import FlexCol from '../layout/FlexCol.vue';
import Divider from '../display/Divider.vue';
import ShareSheetButtons from './ShareSheetButtons.vue';

const themeContext = useTheme();

export interface ShareSheetProps extends Partial<PopupProps> {
  items: (ShareSheetItem[])|ShareSheetItem[][],
  /**
   * 选项条目样式
   */
  itemStyle?: ViewStyle;
  /**
   * 选项条目文字样式
   */
  itemTextStyle?: TextStyle;
  /**
   * 顶部标题
   */
  title?: string;
  /**
   * 选项上方的描述信息
   */
  description?: string;
  /**
   * 取消按钮文字
   */
  cancelText?: string;
  /**
   * 是否显示取消按钮
   * @default true
   */
  showCancel?: boolean;
}

export interface ShareSheetItem {
  title: string;
  icon?: string;
  color?: string;
  backgroundColor?: string;
  /**
   * 是否禁用
   * @default false
   */
  disabled?: boolean|undefined;
}

const props = withDefaults(defineProps<ShareSheetProps>(), {
  showCancel: true,
});
const emit = defineEmits([ 'update:show', 'select' ]);

const iconSize = computed(() => themeContext.resolveThemeSize('ShareSheetItemIconSize', 70));
const themeStyles = themeContext.useThemeStyles({
  viewCancel: {
    backgroundColor: DynamicColor('ShareSheetCancelBackgroundColor', 'light'),
    paddingTop: DynamicSize('ShareSheetCancelPaddingTop', 20),
  },
  item: {
    flexDirection: 'column',
    flexBasis: DynamicSize('ShareSheetItemWidth', '25%'),
    flexShrink: 0,
    width: DynamicSize('ShareSheetItemWidth', '25%'),
    padding: DynamicSize2('ShareSheetItemPaddingVertical', 'ShareSheetItemPaddingHorizontal', 25, 0),
  },
  itemText: {
    marginTop: DynamicSize('ShareSheetItemTextMarginTop', 15),
    fontSize: DynamicSize('ShareSheetItemTextFontSize', 26),
  },
});

function onItemClick(item: ShareSheetItem) {
  if (item.disabled) {
    return;
  }
  emit('select', item);
  emit('update:show', false);
}
function onCancelClick() {
  emit('update:show', false);
}

</script>