import React from 'react'
import {
  renderSocialIconOnly,
  defaultRenderIconWrapper,
  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, onClick } = props
  return (
    <SocialIconListContainer
      iconsList={list}
      renderIconWrapper={defaultRenderIconWithLinkOrClickWrap}
      onClick={onClick}
    />
  )
}

export { defaultRenderWrapper, defaultRenderHeaderView, defaultRenderListView }