/* eslint-disable react/forbid-component-props */
import React, { CSSProperties } from 'react';

import { TypographyTokens } from '../../../foundation/Typography';
import { Typography } from '../../Typography';
import { SelectOption } from '../index';
import { OptionItem, OptionListContainer } from './OptionList.styled';

type OptionsListProps<Option extends SelectOption<string | number>> = {
  onClick: (optionId: Option['id']) => void;
  optionItemStyles?: CSSProperties;
  options: Option[];
  optionsContainerStyles?: CSSProperties;
  optionsTypographyToken: TypographyTokens;
  parentWidth: number;
  renderOptionItem?: ({
    option,
    onClick,
    disabled,
  }: {
    disabled?: boolean;
    onClick: (optionId: Option['id']) => void;
    option: Option;
  }) => React.ReactNode;
};

export function OptionsList<Option extends SelectOption<string | number>>({
  options,
  parentWidth,
  onClick,
  optionsTypographyToken,
  optionsContainerStyles,
  optionItemStyles,
  renderOptionItem,
}: OptionsListProps<Option>) {
  return (
    <OptionListContainer style={{ width: parentWidth, ...optionsContainerStyles }}>
      {options.map((option) =>
        renderOptionItem ? (
          renderOptionItem({
            onClick,
            option,
          })
        ) : (
          <OptionItem
            key={option.id}
            disabled={option.isDisabled}
            style={optionItemStyles}
            onClick={() => !option.isDisabled && onClick(option.id)}
          >
            {option.icon}
            <Typography
              colorToken={option.isDisabled ? 'white300' : 'white100'}
              data-testid={`OptionList-OptionItem-${option.id}`}
              typographyToken={optionsTypographyToken}
            >
              {option.name}
            </Typography>
          </OptionItem>
        ),
      )}
    </OptionListContainer>
  );
}