import React, { useReducer, useRef, useEffect } from 'react';
import { Box, useInput } from 'ink';

interface ScrollAreaProps {
  height: number;
  children: React.ReactNode;
}

const reducer = (state: any, action: any) => {
  switch (action.type) {
    case 'SET_INNER_HEIGHT':
      return {
        ...state,
        innerHeight: action.innerHeight
      };

    case 'SCROLL_DOWN':
      return {
        ...state,
        scrollTop: Math.min(
          state.innerHeight - state.height,
          state.scrollTop + 3
        )
      };

    case 'SCROLL_UP':
      return {
        ...state,
        scrollTop: Math.max(0, state.scrollTop - 3)
      };

    default:
      return state;
  }
};

export const ScrollArea: React.FC<ScrollAreaProps> = ({ height, children }) => {
  const [state, dispatch] = useReducer(reducer, {
    height,
    scrollTop: 0
  });

  const innerRef = useRef<any>(null);

  useEffect(() => {
    // Calculate inner height based on React children count
    const childrenArray = React.Children.toArray(children);
    dispatch({
      type: 'SET_INNER_HEIGHT',
      innerHeight: childrenArray.length
    });
  }, [children]);

  useInput((_input, key) => {
    if (key.downArrow) {
      dispatch({
        type: 'SCROLL_DOWN'
      });
    }

    if (key.upArrow) {
      dispatch({
        type: 'SCROLL_UP'
      });
    }
  });

  return (
    <Box height={height} flexDirection="column" overflow="hidden">
      <Box
        ref={innerRef}
        flexShrink={0}
        flexDirection="column"
        marginTop={-state.scrollTop}
      >
        {children}
      </Box>
    </Box>
  );
};