import React from "react";
import { Box, Text, UseInput } from "./Ink";
import { Entity } from "../ZQueryBuilder";
import { SelectableList } from "./SelectableList";
import { useKeyboardShortcuts } from "./KeyboardShortcuts";

type EntityPickerProps = {
  width: number;
  height: number;
  onEntitySelection: (entity: Entity) => void;
  useInput: UseInput;
};

export const EntityPicker = ({
  width,
  height,
  onEntitySelection,
  useInput,
}: EntityPickerProps) => {
  useKeyboardShortcuts({
    upArrow: { name: "Previous item" },
    downArrow: { name: "Next item" },
    space: { name: "Select item" },
  });

  return (
    <Box flexDirection="column" width={width} height={height}>
      <Text>Pick an entity to query:</Text>
      <SelectableList
        width={width}
        height={height - 2}
        items={["app", "account", "user", "task"]}
        item={{ key: (entity) => entity, label: (entity) => entity }}
        onItemSelected={onEntitySelection}
        useInput={useInput}
      />
    </Box>
  );
};