import React from 'react'
import { wording } from 'src/words'
import { string } from '@skava/modules/___dist/view-container/types'
// @todo alias
import { Button } from 'atoms/Button'
import styles from './styles'
import { SkipNavProps } from './typings'
import { classes } from './fixture'

// @todo !!!
const Portal = React.Fragment

@styles
class SkipNav extends React.PureComponent<SkipNavProps> {
  static propTypes = {
    // @alias goto
    to: string,
    identifier: string,
  }
  static defaultProps = {
    to: 'main',
    identifier: 'skipnav',
  }
  render() {
    const identifier = this.props.identifier
    const to = '#' + this.props.to

    // tabIndex={}
    return (
      <Portal id={identifier}>
        <a href={to} className={classes.skipnav}>
          {wording.skipToMainContent}
        </a>
      </Portal>
    )
  }
}

export { SkipNav }
export default SkipNav