import type { ColumnTwoWithTopProps } from '@graphcommerce/next-ui'
import {
  breakpointVal,
  ColumnTwoWithTop,
  extendableComponent,
  LazyHydrate,
  sxx,
} from '@graphcommerce/next-ui'
import type { SxProps, Theme } from '@mui/material'
import { Box, Typography } from '@mui/material'
import type { TypographyVariant } from '@mui/material/styles'
import type { ProductListItemRenderer } from '../ProductListItems/renderer'
import { ProductPageName } from '../ProductPageName'
import type { ProductPageDescriptionFragment } from './ProductPageDescription.gql'

export type ProductPageDescriptionProps = Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {
  sx?: SxProps<Theme>
  fontSize?: 'responsive' | TypographyVariant
  product: ProductPageDescriptionFragment
  productListRenderer: ProductListItemRenderer
}

const componentName = 'ProductPageDescription'
const parts = ['root', 'description'] as const

const { classes } = extendableComponent(componentName, parts)

export function ProductPageDescription(props: ProductPageDescriptionProps) {
  const {
    product,
    right,
    fontSize = 'subtitle1',
    maxWidth = 'lg',
    sx = [],
    productListRenderer,
  } = props

  return (
    <LazyHydrate height={500}>
      <ColumnTwoWithTop
        maxWidth={maxWidth}
        className={classes.root}
        sx={sx}
        top={
          <Typography variant='h1' component='h1'>
            <ProductPageName product={product} />
          </Typography>
        }
        left={
          product.description && (
            <Box
              className={classes.description}
              // eslint-disable-next-line react/no-danger
              dangerouslySetInnerHTML={{ __html: product.description.html }}
              sx={sxx(
                {
                  '& p:first-of-type': {
                    marginTop: 0,
                  },
                  '& ul': {
                    padding: 0,
                    margin: 0,
                    display: 'inline',
                    listStyleType: 'none',
                  },
                  '& li': {
                    display: 'inline',
                  },
                },
                fontSize === 'responsive' &&
                  ((theme) => ({
                    '& p, & li': {
                      ...breakpointVal('fontSize', 16, 30, theme.breakpoints.values),
                    },
                  })),
                fontSize !== 'responsive' && {
                  '& p, & li': {
                    fontSize,
                  },
                },
              )}
            />
          )
        }
        right={right}
      />
    </LazyHydrate>
  )
}