import {
  Box,
  Card,
  CardContent,
  CardHeader,
  Stack,
  Typography,
  type TypographyVariant,
  useTheme
} from '@mui/material';

import { toPairs } from 'ramda';
import { makeStyles } from 'tss-react/mui';

const useStyles = makeStyles()((theme) => ({
  headerContainer: {
    alignItems: 'center',
    display: 'flex',
    justifyContent: 'space-between',
    margin: theme.spacing(3)
  },
  itemContainer: {
    borderRadius: 1,
    margin: theme.spacing(3),
    textAlign: 'center'
  }
}));

const TypographyStory = (): JSX.Element => {
  const { classes } = useStyles();
  const { typography } = useTheme();

  const variants: Array<TypographyVariant> = [
    'h1',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'subtitle1',
    'subtitle2',
    'body1',
    'body2',
    'button',
    'caption',
    'overline'
  ];

  return (
    <Box sx={{ width: '100%' }}>
      <Box className={classes.itemContainer}>
        {variants.map((typographyVariant) => (
          <Stack
            className={classes.headerContainer}
            direction="row"
            key={typographyVariant}
            spacing={10}
          >
            <Typography
              display="block"
              gutterBottom
              variant={typographyVariant}
            >
              {typographyVariant}
            </Typography>
            <Card sx={{ minWidth: 545 }}>
              <CardHeader title={typographyVariant} />
              <CardContent>
                {toPairs(typography[typographyVariant]).map(([key, value]) => (
                  <Box
                    key={key}
                    sx={{
                      display: 'flex',
                      justifyContent: 'space-between'
                    }}
                  >
                    <Typography color="text.secondary" variant="subtitle1">
                      {key}
                    </Typography>
                    <Typography color="text.secondary" variant="body2">
                      {value as string}
                    </Typography>
                  </Box>
                ))}
              </CardContent>
            </Card>
          </Stack>
        ))}
      </Box>
    </Box>
  );
};

export default TypographyStory;