import { display } from '@mui/system';

export default compose(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);

<Box display="block">Block</Box>
<Box display="inline">Inline</Box>
<Box display="inline-block">Inline Block</Box>
<Box display="flex">Flex</Box>
<Box display="grid">Grid</Box>
<Box display="none">Hidden</Box>

export const displayRaw = style({
  prop: 'display',
});

{/* Hide on mobile, show on tablet and up */}
<Box display={{ xs: 'none', sm: 'block' }}>
  Hidden on mobile
</Box>

{/* Show only on mobile */}
<Box display={{ xs: 'block', sm: 'none' }}>
  Mobile only
</Box>

{/* Flex on desktop, block on mobile */}
<Box display={{ xs: 'block', md: 'flex' }}>
  Responsive display
</Box>

<Box displayPrint="none">
  Hidden when printing
</Box>

<Box displayPrint="block">
  Visible when printing
</Box>

export const displayPrint = style({
  prop: 'displayPrint',
  cssProperty: false,
  transform: (value) => ({
    '@media print': {
      display: value,
    },
  }),
});

<Box overflow="auto">Auto scroll</Box>
<Box overflow="hidden">Clip overflow</Box>
<Box overflow="scroll">Always scroll</Box>
<Box overflow="visible">Visible overflow</Box>

export const overflow = style({
  prop: 'overflow',
});

<Box sx={{ overflowX: 'auto', overflowY: 'hidden' }}>
  Horizontal scroll only
</Box>

<Box
  textOverflow="ellipsis"
  overflow="hidden"
  whiteSpace="nowrap"
  width={200}
>
  This text will be truncated with ellipsis...
</Box>

<Box textOverflow="clip" overflow="hidden" width={200}>
  This text will be clipped
</Box>

export const textOverflow = style({
  prop: 'textOverflow',
});

<Box visibility="visible">Visible</Box>
<Box visibility="hidden">Hidden but takes space</Box>
<Box visibility="collapse">Collapsed (for table elements)</Box>

export const visibility = style({
  prop: 'visibility',
});

<Box whiteSpace="normal">Normal wrapping</Box>
<Box whiteSpace="nowrap">No wrapping</Box>
<Box whiteSpace="pre">Preserve whitespace</Box>
<Box whiteSpace="pre-wrap">Preserve whitespace with wrapping</Box>
<Box whiteSpace="pre-line">Collapse whitespace, preserve line breaks</Box>

export const whiteSpace = style({
  prop: 'whiteSpace',
});

<Box
  overflow="hidden"
  textOverflow="ellipsis"
  whiteSpace="nowrap"
  maxWidth={300}
>
  This is a long text that will be truncated with ellipsis when it exceeds the maximum width
</Box>

<Box
  sx={{
    display: '-webkit-box',
    overflow: 'hidden',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
  }}
>
  This text will be truncated after 3 lines with an ellipsis. This is useful for card descriptions
  and preview text where you want to show a limited amount of content.
</Box>

<Box
  overflow="auto"
  maxHeight={400}
  sx={{
    '&::-webkit-scrollbar': {
      width: 8,
    },
    '&::-webkit-scrollbar-thumb': {
      backgroundColor: 'divider',
      borderRadius: 1,
    },
  }}
>
  Scrollable content...
</Box>

{/* Hide on screen, show when printing */}
<Box display="none" displayPrint="block">
  This content only appears when printing
</Box>

{/* Show on screen, hide when printing */}
<Box display="block" displayPrint="none">
  This content is hidden when printing
</Box>

<Box
  display={{ xs: 'block', sm: 'flex', md: 'grid' }}
  sx={{
    gap: 2,
    gridTemplateColumns: { md: 'repeat(3, 1fr)' },
  }}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
</Box>

<Box
  sx={{
    display: 'flex',
    overflow: 'hidden',
    '&:hover': {
      overflow: 'auto',
    },
  }}
>
  Show scrollbar on hover
</Box>

import { Box } from '@mui/system';

type DisplayValue = 'block' | 'inline' | 'flex' | 'grid' | 'none';

interface DisplayBoxProps {
  display?: DisplayValue | { xs?: DisplayValue; sm?: DisplayValue; md?: DisplayValue };
  children: React.ReactNode;
}

function DisplayBox({ display, children }: DisplayBoxProps) {
  return <Box display={display}>{children}</Box>;
}