<template>
  <div>
    <ui-prop
      v-prop="target.target"
      :multi-values="multi"
    ></ui-prop>

    <div class="horizontal layout end-justified" style="padding:5px 0;margin-bottom:5px;">
      <ui-button 
        class="blue tiny"
        @confirm="resetNodeSize"
        v-disabled="_checkResizeToTarget(target.target, multi)"
      >
        Resize to Target
      </ui-button>
    </div>
    
    <ui-prop
      v-prop="target.interactable"
      :multi-values="multi"
    ></ui-prop>
    
    <ui-prop
      v-prop="target.enableAutoGrayEffect"
      v-show="_autoGrayEffectEnabled()"
      :multi-values="multi"  
    ></ui-prop>
    
    <cc-gray-section
      v-if="_autoGrayEffectEnabled() && target.enableAutoGrayEffect.value"
      :target.sync="target" 
      :multi-values="multi"
    ></cc-gray-section>
    
    <ui-prop
      v-prop="target.transition"
      :multi-values="multi"
    ></ui-prop>

    <!-- Color Transition -->
    <div v-if="_checkTransition(target.transition, 1, multi)">
      <ui-prop indent=1
        v-prop="target.normalColor"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.pressedColor"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.hoverColor"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.disabledColor"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.duration"
        :multi-values="multi"
      ></ui-prop>
    </div>

    <!-- Sprite Transition -->
    <div v-if="_checkTransition(target.transition, 2, multi)">
      <ui-prop indent=1
        v-prop="target.normalSprite"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.pressedSprite"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.hoverSprite"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.disabledSprite"
        :multi-values="multi"
      ></ui-prop>
    </div>

    <!-- Zoom Transition -->
    <div v-if="_checkTransition(target.transition, 3, multi)">
      <ui-prop indent=1
        v-prop="target.duration"
        :multi-values="multi"
      ></ui-prop>
      <ui-prop indent=1
        v-prop="target.zoomScale"
        :multi-values="multi"
      ></ui-prop>
    </div>

    <cc-array-prop :target.sync="target.clickEvents"></cc-array-prop>
  </div>
</template>

<script>
export default {
  name: 'cc-button',
  props: {
    target: {
      type: Object,
      required: true,
      twoWay: true
    },
    multi: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    T: Editor.T, // 假設 Editor.T 在全局可用
    resetNodeSize() {
      const payload = {
        id: this.target.uuid.value,
        path: "_resizeToTarget",
        type: "Boolean",
        isSubProp: false,
        value: true,
      };
      Editor.Ipc.sendToPanel("scene", "scene:set-property", payload);
    },
    _autoGrayEffectEnabled() {
      return (
        this.target.transition.value !== 2 || 
        !this.target.disabledSprite.value.uuid
      );
    },
    _checkResizeToTarget(t, n) {
      return n ? true : !t.value.uuid;
    },
    _checkTransition(t, n, e) {
      return e ? t.values.every(val => val === n) : t.value === n;
    }
  }
};
</script>