import React from 'react'
import SocialIcon from 'atoms/Icons/SocialIcon'
import { InformationProps, SocialIconListProps } from './typings'
import { IconsListWrapper, IconListPanel, IconLink } from './styled'

function toWrapperProps(item: InformationProps, index: number) {
  const { label, url } = item
  const attributes = {
    target: '_blank',
    className: 'social-' + index,
    title: label,
    href: url,
  }
  return attributes
}

/**
 * using to render social icon
 * it uses SocialIcon from atoms with atom link wrapper
 */
function defaultRenderIconWrapper(item: InformationProps, index?: number) {
  // console.debug('[SocialIconList] defaultRenderIconWrapper')
  // console.dir(item)
  const { color, bgColor, children, dataQa } = item
  const attributes = toWrapperProps(item, index)

  // @todo need to change the fillColor & bgColor out of the IconLink into a styled.withComponent(Icon)
  return (
    <IconListPanel key={index}>
      <IconLink
        {...attributes}
        fillColor={color}
        bgColor={bgColor}
        data-qa={dataQa}
      >
        {children}
      </IconLink>
    </IconListPanel>
  )
}

function renderSocialIconOnly(item: InformationProps) {
  return <SocialIcon type={item.label} breed={item.breed} />
}
function defaultRenderIcon(
  item: InformationProps,
  index: number,
  props: SocialIconListProps
) {
  // console.debug('[SocialIconList] defaultRenderIcon')
  // console.dir({ item, props })

  const { renderIconWrapper } = props
  const children = renderSocialIconOnly(item)
  return renderIconWrapper({ ...item, children }, index)
}

/**
 * rendering all social icons list based on the fixtures shared
 */
function defaultRenderIconList(props: SocialIconListProps) {
  const { iconsList, renderIcon } = props
  const icon = (item, index) => renderIcon(item, index, props)
  const socialIconsView = iconsList.map(icon)
  return socialIconsView
}

/**
 * combining all childrens in one wrapper as a children node
 */
function defaultRenderWrapper(props: SocialIconListProps) {
  const { children, className } = props
  return <IconsListWrapper className={className}>{children}</IconsListWrapper>
}

export {
  renderSocialIconOnly,
  defaultRenderIcon,
  defaultRenderIconWrapper,
  defaultRenderIconList,
  defaultRenderWrapper,
}