import React from 'react'
import { Empty } from 'atoms/Empty'
import { isEmpty } from 'exotic'
import { omit } from '@skava/utils'
import { ButtonProps, ButtonState } from './typings'
import {
  ButtonText,
  ButtonIcon,
  StyledButton,
  LinkWrapper,
  StyledLink,
  StyledIcon,
} from './styled'
import { getFlexOrderByAlignType } from './deps'
/**
 * @description rendering a text if that is not a icon breed
 */
function defaultRenderText(props: ButtonProps, state: ButtonState) {
  const { text, breedType } = props
  if (isEmpty(text) || breedType === 'icon') {
    return <Empty />
  } else {
    return <ButtonText aria-label="label">{text}</ButtonText>
  }
}

/**
 * @description rendering the icon => if the breedType text has "icon"
 */
function defaultRenderIcon(iconDetails: ButtonProps, state: ButtonState) {
  const { iconType } = iconDetails
  return <StyledIcon type={iconType} />
}

function defaultRenderIconWrapper(props: ButtonProps, state: ButtonState) {
  const { breedType, iconAlignType, renderIcon, iconType, direction } = props
  const iconPos = getFlexOrderByAlignType(iconAlignType)
  const icon = renderIcon({ iconType, direction }, state)

  if (breedType.indexOf('icon') === -1) {
    return <Empty />
  } else {
    return <ButtonIcon orderArrange={iconPos}>{icon}</ButtonIcon>
  }
}

/**
 * @description rendering the button
 */
function defaultRenderChildren(props: ButtonProps, state: ButtonState) {
  const {
    text,
    breedType,
    iconAlignType,
    iconType,
    direction,
    renderIcon,
    renderText,
    renderIconWrapper,
  } = props

  const textProps = Object.seal({
    text,
    breedType,
  })

  const iconWrapperProps = Object.seal({
    breedType,
    iconAlignType,
    renderIcon,
    iconType,
    direction,
  })

  const textWrapper = renderText(textProps, state)
  const icon = renderIconWrapper(iconWrapperProps, state)

  const children = (
    <React.Fragment>
      {icon}
      {textWrapper}
    </React.Fragment>
  )
  return children
}

/**
 * @description rendering the button
 */
function defaultRenderWrap(props: ButtonProps, state: ButtonState) {
  const {
    className,
    children,
    renderChildren,
    dataQa,
    to,
    ...remainingProps
  } = props

  const childrenProps = omit(props, ['renderChildren'])
  const child = children || renderChildren(childrenProps, state)

  const removableProps = [
    'breedType',
    'iconType',
    'iconAlignType',
    'renderChildren',
    'renderIcon',
    'renderIconWrapper',
    'renderText',
    'renderWrap',
    'text',
  ]
  const buttonElementProps = omit(remainingProps, removableProps)

  const view = viewProps => {
    if (viewProps.isLink === true) {
      return (
        <LinkWrapper className={className} role="link">
          <StyledLink to={to}>{child}</StyledLink>
        </LinkWrapper>
      )
    } else {
      return (
        <StyledButton
          className={className}
          data-qa={dataQa}
          {...buttonElementProps}
        >
          {child}
        </StyledButton>
      )
    }
  }
  return view(props)
}

export {
  defaultRenderWrap,
  defaultRenderChildren,
  defaultRenderText,
  defaultRenderIcon,
  defaultRenderIconWrapper,
}