import { extendableComponent, responsiveVal, sxx } from '@graphcommerce/next-ui'
import { Trans } from '@lingui/react/macro'
import type { SxProps, Theme } from '@mui/material'
import { Box, Divider, Typography } from '@mui/material'
import type { ProductListCountFragment } from './ProductListCount.gql'

const { classes, selectors } = extendableComponent('ProductListCount', [
  'root',
  'line',
  'count',
] as const)

export type ProductCountProps = ProductListCountFragment & {
  sx?: SxProps<Theme>
  children?: React.ReactNode
}

export function ProductListCount(props: ProductCountProps) {
  const { total_count, children, sx = [] } = props

  return (
    <Box
      sx={sxx(
        (theme) => ({
          display: 'grid',
          gridAutoFlow: 'column',
          gridTemplateColumns: '1fr max-content 1fr',
          columnGap: theme.spacings.xs,
          maxWidth: '100%',
          width: responsiveVal(280, 650),
          alignItems: 'center',
          my: theme.spacings.md,
          mx: 'auto',
        }),
        sx,
      )}
      className={classes.root}
    >
      <Divider component='div' className={classes.line} />
      <Typography
        variant='body2'
        className={classes.count}
        sx={{
          color: 'text.disabled',
          lineHeight: 0,
        }}
      >
        {children ? <> {children} </> : null}
        {total_count === 0 && <Trans>no products</Trans>}
        {total_count === 1 && <Trans>one product</Trans>}
        {(total_count ?? 0) > 1 && <Trans>{total_count} products</Trans>}
      </Typography>
      <Divider component='div' className={classes.line} />
    </Box>
  )
}
ProductListCount.selectors = selectors