import React from 'react'
import Vector from 'atoms/Vector'
import { DefaultProps } from 'icons/typings'
import { renderWrapper as defaultRenderWrapper } from '../renderProps'
import AmericaFlagIcon from './AmericaFlagIcon'
import CanadaFlagIcon from './CanadaFlagIcon'
import ChinaFlagIcon from './ChinaFlagIcon'
import FranceFlagIcon from './FranceFlagIcon'
import IndiaFlagIcon from './IndiaFlagIcon'
import MexicoFlagIcon from './MexicoFlagIcon'
import UKFlagIcon from './UKFlagIcon'
import SpainFlagIcon from './SpainFlagIcon'

// extending interface from Label component
interface Props extends DefaultProps {
  type?: string
}

const wording = {
  description: 'Country flag icons',
  title: 'Flag Icon',
  vectorClassName: 'flagicon',
}

// returning breed based on the breedType
function fromBreedToComponent(type: string) {
  switch (type) {
    case 'canadaflagicon':
      return CanadaFlagIcon
    case 'chinaflagicon':
      return ChinaFlagIcon
    case 'franceflagicon':
      return FranceFlagIcon
    case 'indiaflagicon':
      return IndiaFlagIcon
    case 'mexicoflagicon':
      return MexicoFlagIcon
    case 'spainflagicon':
      return SpainFlagIcon
    case 'ukflagicon':
      return UKFlagIcon
    case 'americaflagicon':
    default:
      return AmericaFlagIcon
  }
}

class FlagIcon extends React.PureComponent<Props> {
  static defaultProps = {
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const { type, renderWrapper, ...remainingProps } = this.props
    const Component = fromBreedToComponent(type)
    const componentView = <Component {...remainingProps} />
    return renderWrapper(componentView)
  }
}

export { FlagIcon }
export default FlagIcon