import Stack from '@material-hu/mui/Stack';
import { type Theme } from '@material-hu/mui/styles';

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

const CARD_STYLE = {
  backgroundColor: (theme: Theme) => theme.palette.new.background.elements.grey,
  borderColor: (theme: Theme) => theme.palette.new.background.elements.grey,
};

const ApprovalDetailDrawerSkeleton = () => {
  return (
    <Stack
      sx={{
        flex: 1,
        gap: 2,
        pb: 2,
      }}
    >
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          <Skeleton
            variant="circular"
            width={40}
            height={40}
          />
          <Stack sx={{ gap: 0.5, flex: 1 }}>
            <Skeleton
              variant="text"
              width="40%"
              height={17}
            />
            <Skeleton
              variant="text"
              width="60%"
              height={25}
            />
          </Stack>
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width="30%"
            height={17}
          />
          <Skeleton
            variant="text"
            width="50%"
            height={25}
          />
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width="35%"
            height={17}
          />
          <Skeleton
            variant="rectangular"
            width={120}
            height={25}
            sx={{ borderRadius: ({ shape }) => shape.borderRadiusM }}
          />
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width="40%"
            height={17}
          />
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <Skeleton
              variant="rectangular"
              width={100}
              height={24}
              sx={{ borderRadius: ({ shape }) => shape.borderRadiusM }}
            />
            <Skeleton
              variant="rectangular"
              width={100}
              height={24}
              sx={{ borderRadius: ({ shape }) => shape.borderRadiusM }}
            />
          </Stack>
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width="45%"
            height={17}
          />
          <Skeleton
            variant="text"
            width="30%"
            height={25}
          />
        </Stack>
      </CardContainer>
      <CardContainer
        fullWidth
        sx={CARD_STYLE}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            variant="text"
            width="30%"
            height={17}
          />
          <Stack sx={{ flexDirection: 'row', gap: 1 }}>
            <Skeleton
              variant="rectangular"
              width={80}
              height={32}
              sx={{ borderRadius: ({ shape }) => shape.borderRadiusM }}
            />
            <Skeleton
              variant="rectangular"
              width={80}
              height={32}
              sx={{ borderRadius: ({ shape }) => shape.borderRadiusM }}
            />
          </Stack>
        </Stack>
      </CardContainer>
    </Stack>
  );
};

export default ApprovalDetailDrawerSkeleton;