<template>
  <view 
    :id="id"
    class="nana-swiperow"
    @touchstart="handleTouchStart"
    @touchmove="handleTouchMove"
    @touchend="handleTouchEnd"
    @mousedown="handleTouchStart"
    @mousemove="handleTouchMove"
    @mouseup="handleTouchEnd"
  >
    <view 
      class="inner"
      :style="{
        transition: currentAnim ? 'transform 0.2s ease' : undefined,
        transform: `translateX(${currentOffset}px)`,
      }"
    >
      <view 
        :style="{
          width: `${props.leftWidth}px`,
          marginLeft: `-${props.leftWidth}px`,
        }"
        class="left"
      >
        <slot name="left" />
      </view>
      <slot />
      <view 
        :style="{
          width: `${props.rightWidth}px`,
          marginRight: `-${props.rightWidth}px`,
        }"
        class="right"
      >
        <slot name="right" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">

import { nextTick, ref } from 'vue';
import { useTheme } from '../theme/ThemeDefine';
import { RandomUtils } from '@imengyu/imengyu-utils';

const themeContext = useTheme();

export interface SwipeRowProps {
  /**
   * 左侧宽度
   */
  leftWidth?: number,
  /**
   * 右侧宽度
   */
  rightWidth?: number,
  /**
   * 是否禁用
   */
  disabled?: boolean,
  /**
   * 是否点击后自动关闭
   * @default true
   */
  autoClose?: boolean,
}

const emit = defineEmits([ 'click' ]);
const props = withDefaults(defineProps<SwipeRowProps>(), {
  rightWidth: 0,
  leftWidth: 0,
  autoClose: true
});

const themeStyles = themeContext.useThemeStyles({
});

const currentAnim = ref(false);
const currentOffset = ref(0);

const id = RandomUtils.genNonDuplicateID(12);
let startX = 0;
let pressed = false;
let startOffset = 0;
let lastMovedSize = 0;

function handleDrag(x: number) {
  const movedSize = x - startX;
  lastMovedSize = movedSize;
  if (movedSize > 0) {
    if (props.leftWidth > 0)
      currentOffset.value = Math.min(startOffset + movedSize, props.leftWidth);
  } else {
    if (props.rightWidth > 0)
      currentOffset.value = Math.max(startOffset + movedSize, -props.rightWidth);
  }
}

function handleTouchStart(e: any) {
  if (props.disabled)
    return;
  pressed = true;
  e.stopPropagation();
  currentAnim.value = false;
  startOffset = currentOffset.value ;
  startX = e.touches[0]?.clientX;
  lastMovedSize = 0;
}
function handleTouchMove(e: any) {
  if (props.disabled || !pressed)
    return;
  e.stopPropagation();
  handleDrag(e.touches[0]?.clientX);
}
function handleTouchEnd(e: any) {
  pressed = false;
  if (props.disabled)
    return;
  currentAnim.value = true;
  nextTick(() => {
    if (Math.abs(lastMovedSize) > 10) {
      if (currentOffset.value > props.leftWidth / 2)
        currentOffset.value = props.leftWidth;
      else if (currentOffset.value < -props.rightWidth / 2)
        currentOffset.value = -props.rightWidth;
      else 
        currentOffset.value = 0;
    } else if (props.autoClose)
      currentOffset.value = 0;
  });
}

</script>

<style lang="scss">
.nana-swiperow {
  position: relative;
  overflow: visible;

  .left {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
  }
}
</style>