import { times } from 'lodash-es';

import Container from '@material-hu/mui/Container';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';

const AgentProfileSkeleton = () => {
  const { t } = useLokaliseTranslation('service_management');

  return (
    <Grid
      item
      xs
      sx={{
        flexGrow: 1,
        height: 'calc(100% - 130px)',
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      <Stack sx={{ overflowY: 'auto', width: 1, height: 1 }}>
        <Container
          maxWidth="lg"
          sx={{
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            pt: 4,
            pb: 4,
            px: 2,
            marginInline: 'auto',
            width: 1,
            flexGrow: 1,
          }}
          disableGutters
        >
          <HuCardContainer
            fullWidth
            padding={24}
          >
            <Stack
              sx={{
                gap: 1,
                flexDirection: 'row',
                alignItems: 'center',
              }}
            >
              <HuSkeleton
                variant="circular"
                width={40}
                height={40}
              />
              <Stack sx={{ width: 1, gap: 0.5 }}>
                <HuSkeleton height={24} />
                <HuSkeleton
                  height={12}
                  width={162}
                />
              </Stack>
            </Stack>
          </HuCardContainer>
          <Stack
            sx={{
              flexDirection: 'row',
              aligntItems: 'center',
              gap: 4,
              justifyContent: 'space-between',
            }}
          >
            <HuTitle
              title={t('COORDINATOR')}
              description={t('COORDINATOR_DESCRIPTION')}
              variant="M"
            />
          </Stack>
          <HuCardContainer
            fullWidth
            padding={24}
          >
            <Stack sx={{ gap: 1 }}>
              {times(3).map(item => (
                <Stack
                  key={item}
                  sx={{
                    p: 2,
                    borderRadius: 2,
                    backgroundColor: theme =>
                      theme.palette.hugoBackground?.neutralBg,
                  }}
                >
                  <HuSkeleton />
                </Stack>
              ))}
            </Stack>
          </HuCardContainer>
          <HuTitle
            title={t('MEMBER')}
            description={t('MEMBER_DESCRIPTION')}
            variant="M"
          />
          <HuCardContainer
            fullWidth
            padding={24}
          >
            <Stack sx={{ gap: 1 }}>
              {times(3).map(item => (
                <Stack
                  key={item}
                  sx={{
                    p: 2,
                    borderRadius: 2,
                    backgroundColor: theme =>
                      theme.palette.hugoBackground?.neutralBg,
                  }}
                >
                  <HuSkeleton />
                </Stack>
              ))}
            </Stack>
          </HuCardContainer>
        </Container>
      </Stack>
    </Grid>
  );
};

export default AgentProfileSkeleton;