import Avatar from '@material-hu/mui/Avatar';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import Skeleton from '@material-hu/components/design-system/Skeleton';

import { type RankingEntry } from 'src/types/prode';

import PositionArrow from './PositionArrow';

type RankingRowProps = {
  entry: RankingEntry;
  isLast?: boolean;
  isHighlighted?: boolean;
  onClick?: (entry: RankingEntry) => void;
};

const RankingRow = ({
  entry,
  isLast,
  isHighlighted,
  onClick,
}: RankingRowProps) => {
  const theme = useTheme();

  return (
    <>
      <Stack
        onClick={() => onClick?.(entry)}
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          px: 2,
          gap: 1,
          minHeight: 48,
          cursor: onClick ? 'pointer' : undefined,
          ...(isHighlighted && {
            backgroundColor: theme.palette.new.action.background.brand.default,
          }),
        }}
      >
        {/* Position Direction */}
        <Stack
          sx={{ width: 16, alignItems: 'center', justifyContent: 'center' }}
        >
          <PositionArrow
            direction={entry.positionDirection}
            color={
              isHighlighted ? theme.palette.new.text.neutral.brand : undefined
            }
          />
        </Stack>

        {/* Position Number */}
        <Typography
          variant="globalXXS"
          fontWeight="fontWeightSemiBold"
          sx={{
            ...(isHighlighted && {
              color: theme.palette.new.text.neutral.brand,
            }),
          }}
        >
          {entry.position}
        </Typography>

        {/* Name + Avatar */}
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
            minWidth: 0,
          }}
        >
          <Avatar
            src={entry.userAvatarUrl ?? undefined}
            sx={{ width: 32, height: 32, fontSize: 14 }}
          >
            {entry.userName?.charAt(0)}
          </Avatar>
          <Typography
            variant="globalXS"
            fontWeight={isHighlighted ? 'fontWeightSemiBold' : undefined}
            sx={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              ...(isHighlighted && {
                color: theme.palette.new.text.neutral.brand,
              }),
            }}
          >
            {entry.userName}
          </Typography>
        </Stack>

        {/* Points */}
        <Typography
          variant={isHighlighted ? 'globalS' : 'globalXS'}
          fontWeight="fontWeightSemiBold"
          sx={{
            ...(isHighlighted && {
              color: theme.palette.new.text.neutral.brand,
            }),
          }}
        >
          {entry.totalPoints}
        </Typography>
      </Stack>
      {!isLast && (
        <Divider
          sx={{ borderColor: theme.palette.new.border.neutral.default }}
        />
      )}
    </>
  );
};

export default RankingRow;

export const RankingRowSkeleton = ({ isLast }: { isLast?: boolean }) => {
  const theme = useTheme();

  return (
    <>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          px: 2,
          gap: 1,
          minHeight: 32,
        }}
      >
        <Skeleton
          variant="circular"
          width={16}
          height={16}
        />
        <Skeleton
          variant="text"
          width={16}
          height={20}
        />
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
          }}
        >
          <Skeleton
            variant="circular"
            width={32}
            height={32}
          />
          <Skeleton
            variant="text"
            width={120}
            height={20}
          />
        </Stack>
        <Skeleton
          variant="text"
          width={32}
          height={22}
        />
      </Stack>
      {!isLast && (
        <Divider
          sx={{ borderColor: theme.palette.new.border.neutral.default }}
        />
      )}
    </>
  );
};

export const RankingTableSkeleton = () => {
  const theme = useTheme();

  return (
    <Stack
      sx={{
        border: `1px solid ${theme.palette.new.border.neutral.default}`,
        borderRadius: 2,
        overflow: 'hidden',
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          px: 2,
          py: 2,
          gap: 1,
          backgroundColor: theme.palette.new.background.elements.grey,
          minHeight: 56,
        }}
      >
        <Skeleton
          variant="circular"
          width={16}
          height={16}
        />
        <Skeleton
          variant="text"
          width={60}
          height={20}
          sx={{ flex: 1 }}
        />
        <Skeleton
          variant="text"
          width={50}
          height={20}
        />
      </Stack>
      <Stack sx={{ pt: 2, pb: 2, gap: 2 }}>
        {Array(8)
          .fill(null)
          .map((_, index) => (
            <RankingRowSkeleton
              key={index}
              isLast={index === 7}
            />
          ))}
      </Stack>
    </Stack>
  );
};