import React from 'react'
import toClassName from 'classnames'
import { isString } from 'exotic'
import { VectorProps } from './typings'

class Vector extends React.PureComponent<VectorProps> {
  static defaultProps: VectorProps = {
    className: '',
    isDynamicViewBox: false,
  }

  render() {
    const {
      children,
      //
      title,
      description,
      //
      namespace,
      vectorClassName,
      className,
      //
      height,
      width,
      viewBox,
      isDynamicViewBox,
      dataQa,
      ...passthroughProps
    } = this.props

    // dynamically set viewBox with width & height
    const shouldUseDynamicViewBox =
      (viewBox === undefined || isDynamicViewBox === true) &&
      width !== undefined &&
      height !== undefined

    const computedViewBox = shouldUseDynamicViewBox
      ? `0 0 ${width} ${height}`
      : viewBox

    // @todo @remove
    const computedClassName = isString(vectorClassName)
      ? 'svg-icon-' + vectorClassName + ' ' + vectorClassName
      : vectorClassName
    const classNamed = toClassName('svg-icon', computedClassName, className)

    // props
    const attributes = {
      className: classNamed,
      viewBox: computedViewBox,

      // @note
      'data-qa': dataQa,
      height,
      width,
    }
    if (isString(title)) {
      attributes['aria-labelledby'] = namespace
    }

    // accessibility
    const titleView = isString(title) && <title id={namespace}>{title}</title>
    const descriptionView = isString(description) && <desc>{description}</desc>

    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        version="1.1"
        role="img"
        {...attributes}
        {...passthroughProps}
      >
        {titleView}
        {descriptionView}
        {children}
      </svg>
    )
  }
}

export { Vector }
export default Vector