import React, { ReactNode } from 'react'
import { MaterialIconProps, IconWrapperProps } from './typings'
import { Wrapper } from './styled'
import Vector from '../Vector'
import { wording } from './wording'

const defaultRenderIcon = (props: MaterialIconProps) => {
  const {
    type,
    pathAliases,
    paths,
    customPaths,
    onClick,
    isDisabled,
  } = props
  // NOTE:  this mechanism allows for us to have shorter names....
  const name = pathAliases[type] || type
  const iconPath = (customPaths && customPaths[name]) || paths[name]
  const iconWords = wording[name]
  const attributes = {
    onClick: isDisabled ? undefined : onClick,
    ...iconWords,
  }

  return (
    <Vector {...attributes} viewBox="0 0 24 24">
      <path d="M0 0h24v24H0z" fill="none" />
      <g>{iconPath}</g>
    </Vector>
  )
}

const defaultWrapper = (
  props: MaterialIconProps,
  attributes: IconWrapperProps,
  icon: ReactNode
) => {
  const { isDisabled, isSelected, isInteractive } = attributes
  const wrapperProps = {
    className: props.className,
    isDisabled,
    isSelected,
    isInteractive,
    'data-qa': props['data-qa'],
  }
  return props.nowrap ? (
    <React.Fragment>{icon}</React.Fragment>
  ) : (
    <Wrapper {...wrapperProps}>{icon}</Wrapper>
  )
}

export { defaultRenderIcon, defaultWrapper }