import * as React from 'react'

import Icon from '../Icon'
import StackView from '../StackView'
import Text from '../Text'

/**
 * Provide an on-screen and optional console accessibilty violation.
 */
export function useAccessibilityViolation(
  /** Content to be displayed in tooltip when hovering element. */
  tooltipContent: React.ReactNode,

  /** Content to be displayed in the console with a reference to the element. */
  consoleContent: string
) {
  if (process.env.NODE_ENV === 'production') {
    return {}
  } else {
    const wrapperRef = React.useRef(null)
    const tooltipProps = {
      title: (
        <StackView width={32} spacing={1} cursor="default">
          <StackView axis="horizontal" alignment="center" spacing={1}>
            <Icon name="exclamation-circle-filled" size="md" color="error" />
            <Text fontSize={3} weight={500}>
              Accessibility Violation
            </Text>
          </StackView>
          <Text fontSize={3} lineHeight={3}>
            {tooltipContent}
          </Text>
        </StackView>
      ),
      openDelay: 0,
      closeDelay: 300,
      popoverProps: {
        textAlign: 'left',
        paddingHorizontal: 2,
        paddingVertical: 2,
        backgroundColor: 'surface',
        color: 'foreground',
        stroke: 'separator',
        strokeWeight: 1,
        elevation: 2,
      },
    }
    const wrapperProps = {
      innerRef: wrapperRef,
      stroke: 'error',
      strokeAlign: 'outside',
      strokeWeight: 4,
    }
    React.useEffect(() => {
      if (wrapperRef.current) {
        console.error(consoleContent, wrapperRef.current)
      }
    }, [])
    return { tooltipProps, wrapperProps }
  }
}