import { CartItemFragment, SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
import { Money } from '@graphcommerce/magento-store'
import { nonNullable } from '@graphcommerce/next-ui'
import { Box } from '@mui/material'
import { BundleCartItemFragment } from '../BundleCartItem/BundleCartItem.gql'

export type BundleProductCartItemOptionsProps = BundleCartItemFragment & CartItemFragment

export function BundleProductCartItemOptions(props: BundleProductCartItemOptionsProps) {
  const { bundle_options, prices } = props

  return (
    <>
      {bundle_options?.map((option) =>
        option?.values.filter(nonNullable).map((option_value) => (
          <Box
            key={option_value.uid}
            sx={(theme) => ({
              display: 'flex',
              gap: theme.spacings.xxs,
              [theme.breakpoints.down('sm')]: {
                fontSize: theme.typography.caption.fontSize,
              },
            })}
          >
            <Box sx={{ color: 'text.primary' }}>
              {option_value.label} {option_value.quantity > 1 && `x${option_value.quantity}`}
            </Box>
            {option_value.price > 0 && (
              <Box sx={(theme) => ({ position: 'absolute', right: theme.spacings.xs })}>
                <Money currency={prices?.price.currency} value={option_value.price} />
              </Box>
            )}
          </Box>
        )),
      )}

      <SelectedCustomizableOptions {...props} />
    </>
  )
}