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

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

import { DETAIL_MAX_WIDTH } from '../constants';

import PositionArrow from './PositionArrow';

type FloatingPositionCardProps = {
  position: number | null;
  totalPoints: number;
  positionDirection: PositionDirection;
  userName: string;
  userAvatarUrl: string | null;
  onClick?: () => void;
};

const FloatingPositionCard = ({
  position,
  totalPoints,
  positionDirection,
  userName,
  userAvatarUrl,
  onClick,
}: FloatingPositionCardProps) => {
  const theme = useTheme();

  const highlightedBg = theme.palette.new.background.layout.brand;
  const brandText = theme.palette.new.text.neutral.brand;
  const borderBrand = theme.palette.new.border.neutral.brand;
  const shadow = theme.palette.new.shadows['8dp'];

  return (
    <Box
      onClick={onClick}
      sx={{
        position: 'fixed',
        left: '50%',
        transform: 'translateX(-50%)',
        bottom: {
          xs: 'calc(16px + env(safe-area-inset-bottom))',
          md: 'calc(24px + env(safe-area-inset-bottom))',
        },
        maxWidth: DETAIL_MAX_WIDTH,
        width: 'calc(100% - 32px)',
        zIndex: theme.zIndex.fab,
        backgroundColor: highlightedBg,
        border: `1px solid ${borderBrand}`,
        borderRadius: 2,
        padding: 2,
        boxShadow: `0px 8px 24px ${shadow}`,
        overflow: 'hidden',
        cursor: onClick ? 'pointer' : undefined,
        userSelect: onClick ? 'none' : undefined,
        transition: 'box-shadow 160ms ease-out, transform 160ms ease-out',
        '@keyframes floatingSlideUp': {
          '0%': { opacity: 0, transform: 'translate(-50%, 24px)' },
          '100%': { opacity: 1, transform: 'translate(-50%, 0)' },
        },
        animation: 'floatingSlideUp 240ms ease-out both',
        ...(onClick && {
          '&:hover': {
            boxShadow: `0px 12px 28px ${shadow}`,
          },
          '&:active': {
            transform: 'translate(-50%, 1px)',
          },
        }),
      }}
    >
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          gap: 1,
        }}
      >
        <Stack
          sx={{ width: 16, alignItems: 'center', justifyContent: 'center' }}
        >
          <PositionArrow
            direction={positionDirection}
            color={brandText}
          />
        </Stack>

        <Typography
          variant="globalXXS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: brandText }}
        >
          {position ?? '-'}
        </Typography>

        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            flex: 1,
            minWidth: 0,
          }}
        >
          <Avatar
            src={userAvatarUrl ?? undefined}
            sx={{ width: 32, height: 32, fontSize: 14 }}
          >
            {userName?.charAt(0)}
          </Avatar>
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
            sx={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              color: brandText,
            }}
          >
            {userName}
          </Typography>
        </Stack>

        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{ color: brandText }}
        >
          {totalPoints}
        </Typography>
      </Stack>
    </Box>
  );
};

export default FloatingPositionCard;