import React from 'react'
import { isSafe, isFunction } from 'exotic'
import { wording } from 'src/words'
import { Empty } from 'atoms/Empty'
import { ArrowIcon } from 'atoms/Icons/ArrowIcon'
import { ApprovalStatusProps } from './typings'
import {
  UserInformationLabel,
  StyledButtonWithIcon,
  StyledDetailedlist,
  StyledDetailedlistRequest,
  StyledUserInformation,
  StyledOrderInformation,
  HeadingWrapper,
  UserInformationHeadingLabel,
  OrderInformationHeadingLabel,
  StyledHeadingValue,
  UserInformationList,
  UserNameValue,
} from './styled'

function renderIconItem(props: ApprovalStatusProps) {
  return <ArrowIcon down />
}

function defaultRenderListHeading() {
  return <Empty />
}

function defaultRenderButton(props: ApprovalStatusProps) {
  const handleState = isSafe(props.state) && props.state.handleToggle
  const showHideContent = isSafe(props.state) ? (props.state.isExpanded ? wording.hideDetailsLabel : wording.showDetailsLabel) : wording.showDetailsLabel
  return <StyledButtonWithIcon text={showHideContent} breedType="icon-with-text" iconAlignType={'suffix'} renderIcon={renderIconItem} onClick={handleState} />
}

function defaultRenderOrderInformation(props: ApprovalStatusProps) {
  const { item } = props
  const isDesktop = item.dateRequestedLabel
  const isTabletOrMobile = (item.dateRequestedLabel).split(' ')[1]
  return (
    <StyledOrderInformation>
      <HeadingWrapper>
        <OrderInformationHeadingLabel isDesktop={isDesktop} isTabletOrMobile={isTabletOrMobile} />
        <StyledHeadingValue>{item.dateRequestedValue}</StyledHeadingValue>
      </HeadingWrapper>
      <StyledDetailedlistRequest list={item.statusInformation} renderListHeading={defaultRenderListHeading} />
    </StyledOrderInformation>
  )
}

function defaultRenderUserInformation(props: ApprovalStatusProps) {
  const { item, onUserName } = props
  const handleOnClick = (event: Event) => {
    if (isFunction(onUserName)) {
      const changeArgs = { event }
      onUserName(changeArgs)
    }
  }
  return (
    <StyledUserInformation>
      <HeadingWrapper>
        <UserInformationHeadingLabel>{item.userIdLabel}:</UserInformationHeadingLabel>
        <StyledHeadingValue>{item.userIdValue}</StyledHeadingValue>
      </HeadingWrapper>
      <StyledUserInformation>
        <StyledDetailedlist list={item.userInformation} renderListHeading={defaultRenderListHeading} />
        <UserInformationList>
          <UserInformationLabel>{item.userName.label} : </UserInformationLabel>
          <UserNameValue onClick={handleOnClick}>{item.userName.value}</UserNameValue>
        </UserInformationList>
      </StyledUserInformation>
    </StyledUserInformation>
  )
}

export {
  defaultRenderButton,
  defaultRenderOrderInformation,
  defaultRenderUserInformation,
}