import { Virtualizer } from "./index";
import type { VirtualizerProps, VirtualizerHandle } from "./types";

/**
 * Example usage of the Qwik Virtualizer component
 */

// Basic example with array of items
export const BasicExample = () => {
  const items = Array.from({ length: 1000 }, (_, i) => `Item ${i}`);
  
  const props: VirtualizerProps = {
    children: items.map((item, index) => ({
      type: "div",
      props: {
        key: index,
        children: item,
        style: { padding: "10px", borderBottom: "1px solid #ccc" }
      }
    }))
  };

  return Virtualizer(props);
};

// Example with render function
export const RenderFunctionExample = () => {
  const props: VirtualizerProps = {
    count: 1000,
    children: (index: number) => ({
      type: "div",
      props: {
        children: `Dynamic Item ${index}`,
        style: { 
          padding: "10px", 
          borderBottom: "1px solid #ccc",
          backgroundColor: index % 2 === 0 ? "#f5f5f5" : "#fff"
        }
      }
    })
  };

  return Virtualizer(props);
};

// Example with imperative API
export const ImperativeExample = () => {
  let virtualizerHandle: VirtualizerHandle | undefined;

  const props: VirtualizerProps = {
    count: 1000,
    children: (index: number) => ({
      type: "div",
      props: {
        children: `Item ${index}`,
        style: { padding: "10px", borderBottom: "1px solid #ccc" }
      }
    }),
    ref: (handle) => {
      virtualizerHandle = handle;
    }
  };

  // Example methods that could be called
  const scrollToTop = () => {
    virtualizerHandle?.scrollTo(0);
  };

  const scrollToIndex = (index: number) => {
    virtualizerHandle?.scrollToIndex(index);
  };

  const getScrollInfo = () => {
    if (virtualizerHandle) {
      return {
        offset: virtualizerHandle.scrollOffset,
        size: virtualizerHandle.scrollSize,
        viewport: virtualizerHandle.viewportSize
      };
    }
    return null;
  };

  return {
    virtualizer: Virtualizer(props),
    scrollToTop,
    scrollToIndex,
    getScrollInfo
  };
};

// Example with horizontal scrolling
export const HorizontalExample = () => {
  const props: VirtualizerProps = {
    count: 100,
    horizontal: true,
    children: (index: number) => ({
      type: "div",
      props: {
        children: `Col ${index}`,
        style: { 
          padding: "10px", 
          borderRight: "1px solid #ccc",
          minWidth: "150px",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center"
        }
      }
    })
  };

  return Virtualizer(props);
};

// Example with custom item sizes
export const VariableSizeExample = () => {
  const props: VirtualizerProps = {
    count: 1000,
    itemSize: (index: number) => index % 3 === 0 ? 80 : index % 2 === 0 ? 60 : 40,
    children: (index: number) => ({
      type: "div",
      props: {
        children: `Variable Item ${index}`,
        style: { 
          padding: "10px", 
          borderBottom: "1px solid #ccc",
          height: index % 3 === 0 ? "60px" : index % 2 === 0 ? "40px" : "20px",
          display: "flex",
          alignItems: "center"
        }
      }
    })
  };

  return Virtualizer(props);
};

// Example with scroll event handling
export const ScrollEventExample = () => {
  const props: VirtualizerProps = {
    count: 1000,
    children: (index: number) => ({
      type: "div",
      props: {
        children: `Item ${index}`,
        style: { padding: "10px", borderBottom: "1px solid #ccc" }
      }
    }),
    onScroll$: (offset: number) => {
      console.log("Scroll offset:", offset);
    },
    onScrollEnd$: () => {
      console.log("Scrolling ended");
    }
  };

  return Virtualizer(props);
};