/app/chrome-extension/entrypoints/sidepanel/composables/useTextareaAutoResize.ts

/**
 * Composable for textarea auto-resize functionality.
 * Automatically adjusts textarea height based on content while respecting min/max constraints.
 */
import { ref, watch, nextTick, onMounted, onUnmounted, type Ref } from 'vue';

export interface UseTextareaAutoResizeOptions {
  /** Ref to the textarea element */
  textareaRef: Ref<HTMLTextAreaElement | null>;
  /** Ref to the textarea value (for watching changes) */
  value: Ref<string>;
  /** Minimum height in pixels */
  minHeight?: number;
  /** Maximum height in pixels */
  maxHeight?: number;
}

export interface UseTextareaAutoResizeReturn {
  /** Current calculated height */
  height: Ref<number>;
  /** Whether content exceeds max height (textarea is overflowing) */
  isOverflowing: Ref<boolean>;
  /** Manually trigger height recalculation */
  recalculate: () => void;
}

const DEFAULT_MIN_HEIGHT = 50;
const DEFAULT_MAX_HEIGHT = 200;

/**
 * Composable for auto-resizing textarea based on content.
 *
 * Features:
 * - Automatically adjusts height on input
 * - Respects min/max height constraints
 * - Handles width changes (line wrapping affects height)
 * - Uses requestAnimationFrame for performance
 */
export function useTextareaAutoResize(
  options: UseTextareaAutoResizeOptions,
): UseTextareaAutoResizeReturn {
  const {
    textareaRef,
    value,
    minHeight = DEFAULT_MIN_HEIGHT,
    maxHeight = DEFAULT_MAX_HEIGHT,
  } = options;

  const height = ref<number>(minHeight);
  const isOverflowing = ref(false);

  let scheduled = false;
  let resizeObserver: ResizeObserver | null = null;
  let lastWidth = 0;

  /**
   * Calculate textarea height based on content.
   * Only updates the reactive `height` and `isOverflowing` refs.
   * The actual DOM height is controlled via :style binding in the template.
   */
  function recalculate(): void {
    const el = textareaRef.value;
    if (!el) return;

    // Temporarily set height to 'auto' to get accurate scrollHeight
    // Save current height to minimize visual flicker
    const currentHeight = el.style.height;
    el.style.height = 'auto';

    const contentHeight = el.scrollHeight;
    const clampedHeight = Math.min(maxHeight, Math.max(minHeight, contentHeight));

    // Restore height immediately (the actual height is controlled by Vue binding)
    el.style.height = currentHeight;

    // Update reactive state
    height.value = clampedHeight;
    // Add small tolerance (1px) to account for rounding
    isOverflowing.value = contentHeight > maxHeight + 1;
  }

  /**
   * Schedule height recalculation using requestAnimationFrame.
   * Batches multiple calls within the same frame for performance.
   */
  function scheduleRecalculate(): void {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(() => {
      scheduled = false;
      recalculate();
    });
  }

  // Watch value changes
  watch(
    value,
    async () => {
      await nextTick();
      scheduleRecalculate();
    },
    { flush: 'post' },
  );

  // Watch textarea ref changes (in case it's replaced)
  watch(
    textareaRef,
    async (newEl, oldEl) => {
      // Cleanup old observer
      if (resizeObserver && oldEl) {
        resizeObserver.unobserve(oldEl);
      }

      if (!newEl) return;

      await nextTick();
      scheduleRecalculate();

      // Setup new observer for width changes
      if (resizeObserver) {
        lastWidth = newEl.offsetWidth;
        resizeObserver.observe(newEl);
      }
    },
    { immediate: true },
  );

  onMounted(() => {
    const el = textareaRef.value;
    if (!el) return;

    // Initial calculation
    scheduleRecalculate();

    // Setup ResizeObserver for width changes
    // Width changes affect line wrapping, which affects scrollHeight
    if (typeof ResizeObserver !== 'undefined') {
      lastWidth = el.offsetWidth;
      resizeObserver = new ResizeObserver(() => {
        const current = textareaRef.value;
        if (!current) return;

        const currentWidth = current.offsetWidth;
        if (currentWidth !== lastWidth) {
          lastWidth = currentWidth;
          scheduleRecalculate();
        }
      });
      resizeObserver.observe(el);
    }
  });

  onUnmounted(() => {
    resizeObserver?.disconnect();
    resizeObserver = null;
  });

  return {
    height,
    isOverflowing,
    recalculate,
  };
}