import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
import { cs } from '../utils'
import { DefinitionProps } from './definition.types'
import { DefinitionContent } from './definitionContent'

/**
 * Properties are definition lists
 * */
// @formatter:off
export const DefinitionVerticalBase = styled.dlBox`
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));

  .vui-definitionItemWrapper {
    display: flex;
    flex-direction: column;
  }

  dt {
    display: inline-flex;
  }

  dd {
    white-space: pre-wrap;
  }

  dd > * {
    margin-left: 0 !important;
  }
`

export const DefinitionHorizontalBase = styled.dlBox`
  padding: 10px;
  display: grid;
  gap: 0;

  .vui-definitionItemWrapper {
    display: flex;
    flex-direction: column;
    @media (min-width: 1024px) {
      flex-direction: row;
    }
  }

  dt,
  dd {
    display: inline-flex;
    padding-left: 5px;
  }

  dt {
    width: 20%;
    min-width: 130px;
  }

  dd {
    white-space: pre-wrap;
  }

  dd > * {
    margin-left: 0 !important;
  }
`
// @formatter:on

export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
  const { orientation = 'horizontal', className, ...rest } = omitThemingProps(props)
  const styles = useStyleConfig('Definition', props)
  return orientation === 'horizontal' ? (
    <DefinitionHorizontalBase
      className={cs('vui-definition vui-definition-horizontal', className)}
      ref={ref}
      {...styles.container}
      {...rest}
    >
      <DefinitionContent orientation="horizontal" {...rest} />
    </DefinitionHorizontalBase>
  ) : (
    <DefinitionVerticalBase
      className={cs('vui-definition vui-definition-vertical', className)}
      ref={ref}
      {...styles.container}
      {...rest}
    >
      <DefinitionContent orientation="vertical" {...rest} />
    </DefinitionVerticalBase>
  )
})

Definition.displayName = 'Definition'
export default Definition
