import React from 'react'
import {
  renderSocialIconOnly,
  defaultRenderIconWrapper,
  defaultRenderIcon,
  SocialIconListProps,
} from 'molecules/SocialIconList'
import Empty from 'atoms/Empty'
import { ShareProps, ItemProps } from './typings'
import { isNonEmptyString } from './deps'
import {
  ShareWrapper,
  ShareHeader,
  SocialIconListContainer,
  StyledSocialIconButton,
  IconListPanel,
} from './styled'

/**
 * @description only renders wrappers
 */
function defaultRenderWrapper(props: ShareProps) {
  const { className, children } = props
  return <ShareWrapper className={className}>{children}</ShareWrapper>
}

/**
 * @description Renders title
 * @param props ShareProps
 */
function defaultRenderHeaderView(props: ShareProps) {
  const { label } = props
  if (isNonEmptyString(label)) {
    return <ShareHeader>{label}</ShareHeader>
  } else {
    return <Empty />
  }
}

function defaultRenderIconWithLinkOrClickWrap(item: ItemProps, index: number, props: SocialIconListProps) {
  const children = renderSocialIconOnly(item)
  const { color, bgcolor } = item
  if (item.onClick) {
    return (<IconListPanel>
      <StyledSocialIconButton onClick={item.onClick} fillColor={color} bgColor={bgcolor}>{children}</StyledSocialIconButton>
    </IconListPanel>)
  } else {
    return defaultRenderIconWrapper({ ...item, children })
  }
}

/**
 * @description Renders social share list
 * @param props ShareProps
 */
function defaultRenderListView(props: ShareProps) {
  const { list } = props
  return (
    <SocialIconListContainer
      iconsList={list}
      renderIconWrapper={defaultRenderIconWithLinkOrClickWrap}
    />
  )
}

export { defaultRenderWrapper, defaultRenderHeaderView, defaultRenderListView }