import { Fragment } from 'react';

import { useDimensions } from '@material-hu/hooks/useDimensions';
import Divider from '@material-hu/mui/Divider';
import Grid from '@material-hu/mui/Grid';
import Stack from '@material-hu/mui/Stack';

import { getProfileDataContainerColumns } from '@material-hu/components/composed-components/profile/DataContainer/utils';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import Skeleton from '@material-hu/components/design-system/Skeleton';

const dataSections = [6, 3];

const ProfileContentSkeleton = () => {
  const {
    ref,
    dimensions: { width },
  } = useDimensions();
  const columns = getProfileDataContainerColumns(width);
  return (
    <Stack sx={{ flexDirection: 'row', gap: 3, alignItems: 'flex-start' }}>
      <CardContainer sx={{ flex: 0, minWidth: 240 }}>
        <Stack sx={{ gap: 1.5 }}>
          {Array.from({ length: 4 }, (_, index) => (
            <Skeleton
              key={index}
              variant="rounded"
              height={56}
              width="100%"
              sx={{ borderRadius: 2 }}
            />
          ))}
        </Stack>
      </CardContainer>
      <Stack
        ref={ref}
        sx={{ flex: 1, gap: 2 }}
      >
        {dataSections.map((count, index) => (
          <CardContainer
            fullWidth
            key={index}
          >
            <Stack sx={{ gap: 1.5, '& *': { transform: 'none' } }}>
              <Skeleton
                variant="text"
                height={25}
                width="50%"
              />
              <Grid
                container
                columnSpacing={2}
                columns={columns}
              >
                {Array.from({ length: count }, (_, fieldIndex) => {
                  const isLastColumn = fieldIndex % columns === columns - 1;
                  const isLast = fieldIndex === count - 1;

                  return (
                    <Fragment key={fieldIndex}>
                      <Grid
                        item
                        xs={1}
                      >
                        <Stack sx={{ gap: 0.5 }}>
                          <Skeleton
                            variant="text"
                            height={20}
                            width="50%"
                          />
                          <Skeleton
                            variant="text"
                            height={20}
                            width="100%"
                          />
                        </Stack>
                      </Grid>
                      {isLastColumn && !isLast && (
                        <Grid
                          item
                          xs={columns}
                        >
                          <Divider sx={{ my: 1.5 }} />
                        </Grid>
                      )}
                    </Fragment>
                  );
                })}
              </Grid>
            </Stack>
          </CardContainer>
        ))}
      </Stack>
    </Stack>
  );
};

export default ProfileContentSkeleton;
