<template>
  <field :disabled="disabled" :small="small" :ellipsisLabel="ellipsisLabel">
    <label
      class="input-toggle"
      :class="{ isOn: modelValue, disabled, overflow: ellipsisLabel }"
      :title="ellipsisLabel ? label : undefined"
    >
      <span class="input-toggle__label-group">
        <span class="input-switch-info">{{ label }}</span>
        <BmsTooltip v-if="helperText" :tooltipText="helperText">
          <span class="field__label-helper--icon">
            <HelpCircle />
          </span>
        </BmsTooltip>
      </span>
      <UiBmsSwitch
        :modelValue="modelValue"
        :disabled="disabled"
        :name="name"
        @update:modelValue="
          (value: boolean) => $emit('update:modelValue', value)
        "
      />
    </label>
  </field>
</template>

<script lang="ts" setup>
import { HelpCircle } from 'lucide-vue-next';
import UiBmsSwitch from '@/components/form/UiBmsSwitch.vue';
import { BmsTooltip } from '@/index';
import { FieldComponentProps } from '@/plugins/field/field-component.model';

interface Props extends FieldComponentProps {
  name: string;
  modelValue: boolean;
}

withDefaults(defineProps<Props>(), {
  disabled: false,
  modelValue: false,
});

defineEmits<{
  (e: 'update:modelValue', value: any): void;
}>();
</script>

<style lang="scss" scoped>
.input-toggle {
  /* Align with FieldComponent label (--field-label-color → --bms-font-color) */
  --label-color: var(--bms-font-color);
  --cursor: pointer;

  font-weight: var(--field-label-font-weight);
  display: flex;
  align-items: center;
  gap: 0.5em;

  &__label-group {
    display: flex;
    align-items: center;
  }

  &.overflow {
    width: 100%;
    .input-toggle__label-group {
      flex: 1;
      min-width: 0;
    }
    .input-switch-info {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
    }
  }

  .input-switch-info {
    color: var(--label-color);
    transition: 0.2s;
  }

  &.isOn {
    --label-color: var(--bms-main-100);
  }

  &.disabled {
    --label-color: light-dark(var(--bms-grey-50), var(--bms-grey-75));
    --cursor: default;
  }

  &:hover {
    cursor: var(--cursor);
  }
}
</style>
