import { useDown, useStyleConfig } from '../core'
import Menu from '../menu'
import { useHeaderContext } from './context'
import { HeaderSupportProps } from './header.types'

/** Supporting internal component to avoid code duplication. */
function ListContent({ links = [] }: Pick<HeaderSupportProps, 'links'>) {
  const styles = useStyleConfig('Header', useHeaderContext()).services

  return (
    <>
      <Menu.Item
        isTruncated
        key="veracity-support"
        linkProps={{ href: 'https://support.veracity.com/' }}
        text="Veracity support"
        title="Veracity support"
        {...styles.item}
      />
      <Menu.Item
        isTruncated
        key="veracity-terms"
        linkProps={{ href: 'https://id.veracity.com/terms-of-use' }}
        text="Veracity terms"
        title="Veracity terms"
        {...styles.item}
      />
      <Menu.Item
        isTruncated
        key="privacy"
        linkProps={{ href: 'https://services.veracity.com/PrivacyStatement' }}
        text="Privacy"
        title="Privacy"
        {...styles.item}
      />

      {links.length > 0 &&
        links.map(({ text, url }, index) => (
          <Menu.Item isTruncated key={index} linkProps={{ href: url }} text={text} title={text} {...styles.item} />
        ))}
    </>
  )
}

/** Displays a list of services available to the user. */
export function HeaderSupport(props: HeaderSupportProps) {
  const { links = [], ...rest } = props
  const styles = useStyleConfig('Header', useHeaderContext()).services

  const isTablet = useDown('lg')
  const offsetX = isTablet ? 162 : 135

  return (
    <>
      <Menu isLazy={false} offset={[offsetX, 16]} placement="bottom-end" size="lg" {...rest}>
        <Menu.Button
          className="vui-app-info-trigger"
          color={styles.button.color}
          icon="falQuestionCircle"
          ml={1}
          size="lg"
          title="Support"
          {...styles.button}
        />

        <Menu.List maxH={295} right={0} w={isTablet ? 280 : 320} {...styles.list}>
          <ListContent links={links} />
        </Menu.List>
      </Menu>
    </>
  )
}

HeaderSupport.displayName = 'HeaderSupport'

export default HeaderSupport
