import { nextTick, onMounted, render } from 'vue';
import type { MyHTMLElement } from '../types';
import {
  PickerClear,
  PickerSeparator,
  PickerSuffix
} from '../components/Icons';
import {
  EL_RANGE_CLOSE_ICON,
  EL_RANGE_ICON,
  EL_RANGE_SEPARATOR
} from '../utils/constants';

export const useAlignAntdStyle = (
  elDateEditorEl: { value: MyHTMLElement },
  elPopperEl: { value: MyHTMLElement },
  { props }: any
) => {
  onMounted(async () => {
    await nextTick();

    // 替换分隔符
    const elRangeSeparator = elDateEditorEl.value?.querySelector(
      `.${EL_RANGE_SEPARATOR}`
    );
    if (elRangeSeparator) {
      render(<PickerSeparator />, elRangeSeparator);
    }

    // 替换后缀 日历 icon 和 clear icon
    const elRangeCloseIcon = elDateEditorEl.value?.querySelector(
      `.${EL_RANGE_CLOSE_ICON}`
    );
    if (elRangeCloseIcon) {
      elRangeCloseIcon.innerHTML = '';
      render(
        <>
          <PickerSuffix />
          {props.allowClear ? <PickerClear /> : null}
        </>,
        elRangeCloseIcon
      );
    }

    // 删除 el 自带的前缀
    const elRangeIcon = elDateEditorEl.value?.querySelector(
      `.${EL_RANGE_ICON}`
    );
    elRangeIcon?.remove();

    // 替换弹层左右箭头
    const dArrowLeft = elPopperEl.value?.querySelector('.d-arrow-left');
    const arrowLeft = elPopperEl.value?.querySelector('.arrow-left');
    const dArrowRight = elPopperEl.value?.querySelector('.d-arrow-right');
    const arrowRight = elPopperEl.value?.querySelector('.arrow-right');
    if (dArrowLeft) dArrowLeft.innerHTML = '«';
    if (arrowLeft) arrowLeft.innerHTML = '‹';
    if (dArrowRight) dArrowRight.innerHTML = '»';
    if (arrowRight) arrowRight.innerHTML = '›';
  });
};
