import { forwardRef, type Ref } from 'react';

import Avatar from '@design-system/Avatar';
import ListItemSkeleton from '@design-system/List/components/ListItemSkeleton';
import Title from '@design-system/Title';
import {
  Divider,
  ListItem as MuiListItem,
  ListItemButton as MuiListItemButton,
  Stack,
} from '@mui/material';

import SideContent from './SideContent';
import { type ListContainerProps, type ListItemProps } from './types';
import getActions from './utils';

export const ListItem = (
  {
    id,
    sx,
    loading = false,
    onClick,
    text,
    avatar,
    action,
    action2,
    divider,
    sideContent,
    actionMenuList,
    sidePill,
    sideText,
    sideAvatars,
    component,
    selected,
    disabled,
    slotProps,
  }: ListItemProps,
  ref: Ref<HTMLDivElement>,
) => {
  const Container = onClick
    ? (props: ListContainerProps) => (
        <MuiListItemButton
          {...props}
          disabled={disabled}
          selected={selected}
          onClick={onClick}
        />
      )
    : (props: ListContainerProps) => <MuiListItem {...props} />;

  const actions = getActions(action, action2);

  const showActions = actions || actionMenuList || sideContent;
  const showSideContent = sidePill || sideText || sideAvatars;

  return (
    <Stack
      id={id}
      sx={{ minHeight: '40px', flexDirection: 'column', ...sx }}
      ref={ref}
    >
      {loading && <ListItemSkeleton />}
      {!loading && (
        <Container
          component={component}
          sx={{
            p: 2,
            gap: 1,
            flexDirection: 'row',
            alignItems: 'center',
            ...slotProps?.container?.sx,
          }}
        >
          <Stack
            sx={{
              gap: 1,
              flexDirection: 'row',
              flex: 1,
              minWidth: 0,
              alignItems: 'center',
            }}
          >
            {avatar && (
              <Avatar
                {...avatar}
                {...slotProps?.avatar}
              />
            )}
            {text && (
              <Title
                {...text}
                {...slotProps?.title}
                variant="S"
                sx={{
                  flex: 1,
                  minWidth: 0,
                  ...slotProps?.title?.slotProps?.title?.sx,
                }}
              />
            )}
          </Stack>
          {(showSideContent || showActions) && (
            <Stack
              sx={{
                gap: 0.5,
                flexDirection: 'row',
                alignItems: 'center',
                flexShrink: 0,
              }}
            >
              {showSideContent && (
                <SideContent
                  sidePill={sidePill}
                  sideText={sideText}
                  sideAvatars={sideAvatars}
                />
              )}
              {showActions && (
                <>
                  {sideContent}
                  {actions}
                  {actionMenuList}
                </>
              )}
            </Stack>
          )}
        </Container>
      )}
      {divider && <Divider variant="middle" />}
    </Stack>
  );
};

export type { ListItemProps };

export default forwardRef(ListItem);
