import React from 'react';
import styled from 'styled-components';
import { uiFonts } from '../constants/uiFonts';

interface IListMenuOption {
  id: string;
  text: string;
}

export interface IListMenuProps {
  x: number;
  y: number;
  options: IListMenuOption[];
  onSelected: (selectedOptionId: string) => void;
}

export const ListMenu: React.FC<IListMenuProps> = ({
  options,
  onSelected,
  x,
  y,
}) => {
  return (
    <Container x={x} y={y}>
      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
        {options.map((params, index) => (
          <ListElement
            key={params?.id || index}
            onPointerDown={() => {
              onSelected(params?.id);
            }}
          >
            {params?.text || 'No text'}
          </ListElement>
        ))}
      </ul>
    </Container>
  );
};

interface IContainerProps {
  x?: number;
  y?: number;
}

const Container = styled.div<IContainerProps>`
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: start;
  align-items: flex-start;
  position: absolute;
  top: ${props => props.y || 0}px;
  left: ${props => props.x || 0}px;

  li {
    font-size: ${uiFonts.size.xsmall};
  }
`;

const ListElement = styled.li`
  margin-right: 0.5rem;
`;
