import styles from './index.module.scss';
import ContentFields from './ContentFields.js';
import StyleFields from './StyleFields.js';
import cx from '../utils/classname.js';
import type { CSSVariables } from '../utils/types.js';
import { ListProps } from './types.js';
import Flex from '../Flex/index.js';
import ListItem from './ListItem/index.js';

const ListComponent = ({
  listType = 'unordered',
  variant = 'primary',
  gap = '0px',
  showMarker = true,
  className = '',
  style = {},
  children,
  ...rest
}: ListProps) => {
  const ListTag = listType === 'ordered' ? 'ol' : 'ul';
  const defaultClasses = cx(styles.list, {
    [styles.noMarker]: !showMarker,
  });
  const combinedClasses = cx(defaultClasses, className);

  // !todo: placeholder values until we work out how variant system works.
  const cssVariables: CSSVariables = {
    '--hscl-list-item-color': `var(--hscl-listItem-color-${variant})`,
  };

  return (
    <Flex
      as={ListTag}
      direction="column"
      gap={gap}
      className={combinedClasses}
      style={{ ...cssVariables, ...style }}
      {...rest}
    >
      {children}
    </Flex>
  );
};

type ListComponentType = typeof ListComponent & {
  ContentFields: typeof ContentFields;
  StyleFields: typeof StyleFields;
};

const List = ListComponent as ListComponentType;
List.ContentFields = ContentFields;
List.StyleFields = StyleFields;

export default List;
export { ListItem };
