import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import { fadeIn } from '@material-hu/utils/animations';

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

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

type SkeletonProps = {
  multiline?: boolean;
};

const InputFieldSkeleton = ({ multiline = false }: SkeletonProps) => (
  <Stack sx={{ gap: 1.5 }}>
    <Skeleton
      variant="rounded"
      height={24}
      width={100}
    />
    <Skeleton
      variant="rounded"
      height={multiline ? 148 : 56}
      width="100%"
    />
  </Stack>
);

const SectionSkeleton = ({ fields }: { fields: Array<SkeletonProps> }) => (
  <Stack sx={{ gap: 1 }}>
    <Skeleton
      variant="rounded"
      height={30}
      width={130}
    />
    <CardContainer fullWidth>
      <Stack sx={{ gap: 2 }}>
        {fields.map((field, i) => (
          <InputFieldSkeleton
            key={`input-field-skeleton-${i}`}
            multiline={field.multiline}
          />
        ))}
      </Stack>
    </CardContainer>
  </Stack>
);

const SettingsSkeleton = () => (
  <Stack
    sx={{
      gap: 4,
      my: 1,
      animation: `${fadeIn} 300ms ease-in-out`,
      ...LAYOUT_SX,
    }}
  >
    <SectionSkeleton
      fields={[{}, {}, { multiline: true }, { multiline: true }]}
    />

    <SectionSkeleton fields={[{}, {}]} />
  </Stack>
);

export default SettingsSkeleton;