<script setup lang="ts">
import { computed } from 'vue';
import { Modal } from 'ant-design-vue';

import { t } from '@/i18n';

import type { DevStartStopStatus, GroupModuleDevParam } from '@/types';

interface Props {
  info: GroupModuleDevParam;
  startStopStatus?: DevStartStopStatus;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  ok: [value: string];
}>();

const isStartStopParam = computed(() => {
  return /startstoporder/i.test(props.info.dataCode);
});

const disableStartStopCtrl = computed(() => {
  if (isStartStopParam.value) {
    return !props.startStopStatus?.status;
  }

  return false;
});

const disableStartStopTip = computed(() => {
  return props.startStopStatus?.message.join('\n');
});

const handleSwitchClick = (checked: string) => {
  const value = checked === props.info.bitAddress0Detail ? props.info.bitAddress0Status : props.info.bitAddress1Status;

  Modal.confirm({
    title: t('realTimeMonitor.confirmSwitchToMode', { mode: checked }),
    closable: true,
    centered: true,
    onOk() {
      props.info.value = checked;
      emit('ok', value as string);
    },
  });
};
</script>

<template>
  <span class="bit-switch-container">
    <ATooltip overlay-class-name="hvac-tooltip">
      <template #title>{{ disableStartStopTip }}</template>
      <SvgIcon v-show="disableStartStopCtrl && disableStartStopTip" name="info-cirlce-o" />
    </ATooltip>
    <ASwitch
      :checked="info.value"
      :checked-value="<string>info.bitAddress1Detail"
      :un-checked-value="<string>info.bitAddress0Detail"
      :checked-children="info.bitAddress1Detail"
      :un-checked-children="info.bitAddress0Detail"
      :disabled="disableStartStopCtrl"
      @click="handleSwitchClick($event as string)"
    />
  </span>
</template>

<style lang="scss" scoped>
.bit-switch-container {
  display: flex;
  align-items: center;

  i {
    margin-right: 8px;
    font-size: 12px;
    color: #999;
  }
}
</style>
