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

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

import { matchTeamsRowSx, rankingCardContentSx } from '../constants';

import SportsPoolHeaderCard from './SportsPoolHeaderCard';

export const PendingPredictionCardSkeleton = () => (
  <SportsPoolHeaderCard>
    <Stack
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        flex: 1,
        paddingX: { xs: 2, md: 3 },
        paddingY: { xs: 2 },
        minHeight: 98,
      }}
    >
      <Stack sx={{ flex: 1, gap: 0.5 }}>
        <Skeleton
          variant="text"
          width={110}
          height={14}
        />
        <Skeleton
          variant="text"
          width={180}
          height={20}
        />
      </Stack>
      <Stack sx={{ alignItems: 'flex-end', flexShrink: 0, gap: 0.5 }}>
        <Skeleton
          variant="text"
          width={90}
          height={14}
        />
        <Skeleton
          variant="text"
          width={40}
          height={18}
        />
      </Stack>
      <Skeleton
        variant="circular"
        width={40}
        height={40}
        sx={{ flexShrink: 0 }}
      />
    </Stack>
  </SportsPoolHeaderCard>
);

export const PodiumCardSkeleton = () => (
  <SportsPoolHeaderCard>
    <Stack sx={{ ...rankingCardContentSx, padding: { xs: 2, md: 3 } }}>
      <Skeleton
        variant="circular"
        width={40}
        height={40}
      />
      <Stack sx={{ flex: 1, gap: 0.5 }}>
        <Skeleton
          variant="text"
          width={140}
          height={18}
        />
        <Skeleton
          variant="text"
          width={180}
          height={14}
        />
      </Stack>
      <Skeleton
        variant="circular"
        width={40}
        height={40}
      />
    </Stack>
  </SportsPoolHeaderCard>
);

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

  return (
    <CardContainer
      fullWidth
      sx={{ height: 110 }}
    >
      <Stack
        sx={{
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          gap: 1,
          height: '100%',
        }}
      >
        <Stack sx={{ ...matchTeamsRowSx, minHeight: 42 }}>
          {/* Home team */}
          <Stack sx={{ flexDirection: 'column', alignItems: 'center' }}>
            <Skeleton
              variant="text"
              width={60}
              height={14}
            />
            <Skeleton
              variant="rectangular"
              sx={{
                width: { xs: 28, sm: 40 },
                height: { xs: 21, sm: 30 },
                borderRadius: 0.5,
              }}
            />
          </Stack>

          {/* Score */}
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              gap: 1,
            }}
          >
            <Skeleton
              variant="rectangular"
              width={28}
              height={28}
              sx={{ borderRadius: 1 }}
            />
            <Skeleton
              variant="text"
              width={32}
              height={14}
            />
            <Skeleton
              variant="rectangular"
              width={28}
              height={28}
              sx={{ borderRadius: 1 }}
            />
          </Stack>

          {/* Away team */}
          <Stack sx={{ flexDirection: 'column', alignItems: 'center' }}>
            <Skeleton
              variant="rectangular"
              sx={{
                width: { xs: 28, sm: 40 },
                height: { xs: 21, sm: 30 },
                borderRadius: 0.5,
              }}
            />
            <Skeleton
              variant="text"
              width={60}
              height={14}
            />
          </Stack>
        </Stack>

        <Divider
          sx={{
            width: '100%',
            borderColor: theme.palette.new.border.neutral.divider,
          }}
        />

        {/* Venue */}
        <Skeleton
          variant="rectangular"
          width="60%"
          height={14}
          sx={{ alignSelf: 'center', borderRadius: 0.5 }}
        />
      </Stack>
    </CardContainer>
  );
};
