import React from 'react';
import styled from 'styled-components';
import { v4 as uuidv4 } from 'uuid';
import { uiFonts } from '../constants/uiFonts';
import { DraggableContainer } from './DraggableContainer';

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

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

export const ListMenu: React.FC<IListMenuProps> = ({
  options,
  onSelected,
  title,
}) => {
  return (
    <ScrollListContainer title={title}>
      <SkillSplitDiv>
        <hr className="golden" />
      </SkillSplitDiv>

      <ListContainer className="rpgui-list-imp">
        {options.map(params => (
          <ListElement
            key={uuidv4()}
            onPointerDown={() => {
              onSelected(params?.id);
            }}
          >
            {params?.text || 'No text'}
          </ListElement>
        ))}
      </ListContainer>
    </ScrollListContainer>
  );
};

const ScrollListContainer = styled(DraggableContainer)`
  border: 1px solid black;
  width: 400px;
  height: 400px;
  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
    width: auto;
    height: auto;
  }
`;

const SkillSplitDiv = styled.div`
  width: 100%;
  margin-bottom: 10px;
  hr {
    margin: 0px;
    padding: 0px;
  }
  p {
    margin-bottom: 0px;
  }
`;

const ListContainer = styled.ul`
  border: none;
  width: 400px;
  height: 250px;
  overflow-y: scroll;
`;
const ListElement = styled.li`
  margin-right: 0.5rem;
  font-size: ${uiFonts.size.small};
`;
