import { Container } from '@cleartrip/ct-design-container';
import { Typography } from '@cleartrip/ct-design-typography';
import { useStyles } from '@cleartrip/ct-design-style-manager';

import staticBulletedListStyles from './style';
import type { IBulletedListProps } from './type';

/**
 * BulletedList
 *
 * A flexible list renderer that supports ordered (`ol`) and unordered
 * (`ul`) list markers. Each row shows a marker (number or bullet)
 * followed by arbitrary content returned from `renderItem`.
 *
 * The ordered-list marker width auto-scales with the largest row
 * number so every digit column lines up — one extra pixel of slot
 * width per digit so a 10-item list stays aligned with a 100-item
 * list.
 *
 * @example
 * ```tsx
 * <BulletedList
 *   list={faqItems}
 *   listType="ol"
 *   renderItem={(item) => <Typography variant="P2">{item.title}</Typography>}
 * />
 * ```
 */
const BulletedList = <T extends { id?: string | number }>({
  list,
  renderItem,
  listType = 'ol',
  styleConfig,
}: IBulletedListProps<T>) => {
  const {
    itemWrapper: customItemWrapper = [],
    placeHolder: customPlaceHolder = [],
    itemContent: customItemContent = [],
    marker: customMarker = [],
  } = styleConfig || {};

  const maxNumber = list?.length || 0;

  // Character count of the largest row number — drives the marker
  // column width so every item's digit group lines up regardless of
  // 1/2/3-digit transitions.
  const maxNumberDigits = String(maxNumber).length;

  // Width of the number column based on the digit count.
  const numberWidth = maxNumberDigits * 12;

  const dynamicNumberWidth = useStyles(
    () => ({
      root: {
        width: numberWidth,
      },
    }),
    [numberWidth],
  );

  if (!list || list.length === 0) {
    return null;
  }

  return (
    <>
      {list.map((item, index) => (
        <Container
          styleConfig={{ root: [staticBulletedListStyles.itemWrapper, ...customItemWrapper] }}
          key={item?.id ?? index}
        >
          <Container styleConfig={{ root: [staticBulletedListStyles.placeHolder, ...customPlaceHolder] }}>
            {listType === 'ol' ? (
              <Container
                styleConfig={{
                  root: [staticBulletedListStyles.marker, dynamicNumberWidth?.root, ...customMarker],
                }}
              >
                <Typography variant='B2' color='primary'>
                  {index + 1}
                </Typography>
                <Typography variant='B2' color='primary'>
                  .
                </Typography>
              </Container>
            ) : (
              <Typography variant='B2' color='primary'>
                {'\u2022'}
              </Typography>
            )}
          </Container>
          <Container styleConfig={{ root: [staticBulletedListStyles.itemContent, ...customItemContent] }}>
            {renderItem(item, index)}
          </Container>
        </Container>
      ))}
    </>
  );
};

export default BulletedList;