import type * as React from "react"
import { chakra } from "../../system"
import { __DEV__ } from "../../utils"

/**
 * Styles to visually hide an element
 * but make it accessible to screen-readers
 */
export const visuallyHiddenStyle: React.CSSProperties = {
  border: "0px",
  clip: "rect(0px, 0px, 0px, 0px)",
  height: "1px",
  width: "1px",
  margin: "-1px",
  padding: "0px",
  overflow: "hidden",
/**
 * Visually hidden component used to hide
 * elements on screen
 */
export const VisuallyHidden = chakra("span", {
  baseStyle: visuallyHiddenStyle,
})

if (__DEV__) {
  VisuallyHidden.displayName = "VisuallyHidden"
}

/**
 * Visually hidden input component for designing
 * custom input Row using the html `input`
 * as a proxy
 */
export const VisuallyHiddenInput = chakra("input", {
  baseStyle: visuallyHiddenStyle,
})

if (__DEV__) {
  VisuallyHiddenInput.displayName = "VisuallyHiddenInput"
}

export default VisuallyHidden
  whiteSpace: "nowrap",
  position: "absolute",
}
