<template>
  <fieldset>
    <h3 class="mb-0">{{ category }}</h3>
    <label>
      <p class="mb-0">Turn on/off {{ category.toLowerCase() }}</p>
      <input role="switch" type="checkbox"/>{{ fanState }}{{ uvState }}
    </label>
    <!--    <label>-->
    <!--      <input role="switch" type="checkbox" disabled />-->
    <!--      <span>알람 (비활성화)</span>-->
    <!--    </label>-->
  </fieldset>
</template>
<script>
export default {
  name: "ToggleSwitch",
  props: {
    category: { type: String, default: "" },
    // ★ 서버/상위에서 내려주는 현재 FAN 상태: "on" | "off" | 기타
    fanState: { type: String, default: "" },
    uvState: { type: String, default: "" }
  },
  emits: ["toggled"],
  mounted() {
    // 내부 스위치 요소 찾기
    const el =
      this.$el &&
      this.$el.querySelector &&
      (this.$el.querySelector('input[role="switch"]') ||
        this.$el.querySelector('input[type="checkbox"]'));

    if (el) {
      // ★ fanState 반영: "on"이면 체크
      this.applyChecked(el);

      // 사용자 토글 → 상위로 이벤트 전달
      if (!el.__toggle_emit_bound__) {
        el.__toggle_emit_bound__ = true;
        el.addEventListener("change", (e) => {
          this.$emit("toggled", {
            category: this.category || "",
            on: !!e.target.checked
          });
        });
      }
    }
  },
  watch: {
    // ★ fanState가 바뀌면 체크 상태도 즉시 갱신
    fanState() {
      const el =
        this.$el &&
        this.$el.querySelector &&
        (this.$el.querySelector('input[role="switch"]') ||
          this.$el.querySelector('input[type="checkbox"]'));
      if (el) this.applyChecked(el);
    }
  },
  methods: {
    applyChecked(el) {
      // category가 Fan일 때 fanState="on"이면 체크 (대소문자 무시)
      if (String(this.category).toLowerCase() === "fan") {
        el.checked = String(this.fanState).toLowerCase() === "on";
      }
      if (String(this.category).toLowerCase() === "uv") {
        el.checked = String(this.uvState).toLowerCase() === "on";
      }
      // 다른 category에는 영향 없음
    }
  }
};
</script>
<style>
fieldset {
  display: inline-block;
  padding-left: 15px;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

label p {
  width: 110px;
}

[type="checkbox"] {
  appearance: none;
  position: relative;
  border: max(2px, 0.1em) solid rgb(128, 128, 128);
  border-radius: 1.25em;
  width: 3.5em;
  height: 1.8em;
}

[type="checkbox"]::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  transform: scale(0.8);
  background-color: rgb(128, 128, 128);
  transition: left 250ms linear;
}

[type="checkbox"]:checked {
  background-color: tomato;
  border-color: tomato;
}

[type="checkbox"]:checked::before {
  background-color: white;
  left: 1.6em;

}

[type="checkbox"]:disabled {
  border-color: lightgray;
  opacity: 0.7;
  cursor: not-allowed;
}

[type="checkbox"]:disabled:before {
  background-color: lightgray;
}

[type="checkbox"]:disabled + span {
  opacity: 0.7;
  cursor: not-allowed;
}

[type="checkbox"]:focus-visible {
  outline-offset: max(2px, 0.1em);
  outline: max(2px, 0.1em) solid tomato;
}
</style>
