import { useState } from 'react';

import { Avatar } from '@design-system/Avatar';
import {
  Box,
  Collapse,
  Divider,
  IconButton,
  LinearProgress,
  Stack,
  Typography,
} from '@mui/material';
import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
import { getInitials } from '@utils/user';

import { type ParticipationListItemProps } from './types';

const ParticipationListItem = ({
  primary,
  secondary,
  value,
  ratioLabel,
  noDataMessage,
  isEmpty,
  expandable = false,
  depth = 0,
  children,
  isLastItem = false,
  avatarSrc,
  avatarAlt,
}: ParticipationListItemProps) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const rightContent =
    depth === 0 ? (
      <Stack sx={{ gap: 0.5, alignItems: 'flex-end' }}>
        {isEmpty && (
          <Typography
            variant="caption"
            color="textColors.neutralTextLighter"
          >
            {noDataMessage}
          </Typography>
        )}
        {!isEmpty && (
          <Stack sx={{ alignItems: 'flex-end', gap: 0.5 }}>
            <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
              <LinearProgress
                variant="determinate"
                value={value}
                sx={{ width: 84 }}
              />
              <Typography variant="globalXS">{value}%</Typography>
            </Stack>
            <Typography
              variant="globalXXS"
              color="textColors.neutralTextLighter"
              noWrap
            >
              {ratioLabel}
            </Typography>
          </Stack>
        )}
      </Stack>
    ) : (
      <Stack sx={{ alignItems: 'flex-end' }}>
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {isEmpty ? noDataMessage : `${value}%`}
        </Typography>
        {!isEmpty && (
          <Typography
            variant="globalXS"
            color="textColors.neutralTextLighter"
          >
            {ratioLabel}
          </Typography>
        )}
      </Stack>
    );

  return (
    <Stack>
      <Stack
        onClick={expandable ? () => setIsExpanded(prev => !prev) : undefined}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 2,
          py: 1,
          ...(expandable && { cursor: 'pointer' }),
        }}
      >
        {depth === 0 && (avatarSrc || avatarAlt) && (
          <Avatar
            src={avatarSrc}
            alt={avatarAlt}
            text={getInitials(primary)}
            size="small"
          />
        )}
        <Stack sx={{ flex: 1, minWidth: 0 }}>
          <Typography
            variant="globalS"
            fontWeight="fontWeightSemiBold"
            noWrap
          >
            {primary}
          </Typography>
          {secondary && (
            <Typography
              variant="globalXS"
              color="textColors.neutralTextLighter"
              noWrap
            >
              {secondary}
            </Typography>
          )}
        </Stack>

        {rightContent}

        {expandable && (
          <IconButton>
            {isExpanded ? <IconChevronUp /> : <IconChevronDown />}
          </IconButton>
        )}
        {!expandable && <Box sx={{ width: 40 }} />}
      </Stack>

      {expandable && (
        <Collapse
          in={isExpanded}
          timeout="auto"
          unmountOnExit
        >
          <Box
            sx={theme => ({
              bgcolor:
                depth > 0
                  ? theme.palette.new.background.elements.grey
                  : undefined,
              borderRadius: theme.shape.borderRadiusM,
              pl: 5,
              pr: 2,
              my: 1,
            })}
          >
            {children?.(true)}
          </Box>
        </Collapse>
      )}
      {!isLastItem && depth === 1 && <Divider />}
    </Stack>
  );
};

export default ParticipationListItem;
