// @ts-nocheck
import { ref, computed, watch, type PropType } from "vue";
import { useNamespace } from "@pureadmin/utils";

export type OptionsType = {
  label?: string;
  value?: string | number;
  icon?: any;
  iconAttrs?: Record<string, any>;
  tip?: string;
  theme?: string;
  disabled?: boolean;
};

const props = {
  options: {
    type: Array as PropType<Array<OptionsType>>,
    default: () => []
  },
  modelValue: {
    type: [String, Number] as PropType<string | number>,
    default: ""
  },
  size: {
    type: String as PropType<"small" | "default" | "large">,
    default: "default"
  },
  resize: {
    type: Boolean,
    default: false
  },
  block: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  }
};

const emit = defineEmits<{
  (e: "update:modelValue", value: string | number): void;
  (e: "change", value: { option: OptionsType; index: number }): void;
}>();

const ns = useNamespace("segmented");

const currentIndex = ref(0);
const segmentedRef = ref<HTMLElement>();
const labelRefs = ref<HTMLElement[]>([]);

const curMouseOverIndex = ref(0);

const activeStyle = computed(() => {
  return {
    transform: `translateX(${currentIndex.value * 100}%)`,
    width: `${100 / props.options.length}%`
  };
});

function handleClick(index: number, option: OptionsType) {
  if (props.disabled || option.disabled) return;
  currentIndex.value = index;
  emit("update:modelValue", option.value ?? index);
  emit("change", { option, index });
}

function handleMouseover(index: number) {
  curMouseOverIndex.value = index;
}

function handleMouseout() {
  curMouseOverIndex.value = currentIndex.value;
}

watch(
  () => props.modelValue,
  newVal => {
    const index = props.options.findIndex(option => option.value === newVal);
    if (index !== -1) {
      currentIndex.value = index;
    }
  },
  { immediate: true }
);
