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

/**
 * @description rendering the icon => if the breedType text has "icon"
 */
function renderIcon(iconDetails: string, state: ButtonState) {
  const { iconType, direction } = iconDetails
  const attributes = { [direction]: true }
  return <Icons breedType={iconType} {...attributes} />
}

function renderIconWrapper(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 <ButtonIcon orderArrange={iconPos}>{icon}</ButtonIcon>
  } else {
    return <Empty />
  }
}

/**
 * @description rendering the button
 */
function renderChildren(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 renderWrap(props: ButtonProps, state: ButtonState) {
  const { className, children, renderChildren, 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 = (props) => {
    if (props.isLink === true) {
      return (
        <LinkWrapper className={className} role='link'>
          <StyledLink to={to}>{child}</StyledLink>
        </LinkWrapper>
      )
    } else {
      return (
        <StyledButton className={className} {...buttonElementProps}>
          {child}
        </StyledButton>
      )
    }
  }
  return view(props)
}

export { renderWrap, renderChildren, renderText, renderIcon, renderIconWrapper }