import React from 'react'
import { isFunction, isSafe } from 'exotic'
import {
  ModalWrapper,
  PromotionText,
  StyledCloseIcon,
  StyledPromoHeading,
  HeadingWrapper,
  StyledPromoDescription,
  Wrapper,
} from './styled'
import { PromotionModalProps } from './typings'
import { PromotionStateProps } from '../typings'

function defaultRenderModal(
  props: PromotionModalProps,
  state: PromotionStateProps
) {
  const { description, index } = props
  const handleClick = () => {
    state.handleToggleVisibility(index)
  }
  const view = (
    <ModalWrapper>
      <HeadingWrapper>
        <StyledPromoHeading content={'Promo Details:'} breedType={'h5'} />
        <StyledCloseIcon type={'close'} onClick={handleClick} />
      </HeadingWrapper>
      <StyledPromoDescription content={description} />
    </ModalWrapper>
  )

  return view
}

function defaultRenderBox(
  props: PromotionModalProps,
  state: PromotionStateProps
) {
  const { renderModal, name, index, ...remainingProps } = props

  const handleClick = () => {
    state.handleToggleVisibility(index)
  }
  const view = (
    <React.Fragment>
      <PromotionText onClick={handleClick}>{name}</PromotionText>
      {isSafe(state) &&
        state.isVisible === true &&
        state.selectedIndex === index &&
        isFunction(renderModal) &&
        renderModal(props, state)}
    </React.Fragment>
  )

  return view
}

function defaultRenderWrapper(
  props: PromotionModalProps,
  state: PromotionStateProps
) {
  const { className, children, dataQa } = props
  const passThroughProps = {
    className,
    'data-qa': dataQa,
  }
  return <Wrapper {...passThroughProps}>{children}</Wrapper>
}

export { defaultRenderModal, defaultRenderBox, defaultRenderWrapper }