import React from 'react'
import { isSafe, isFunction } from 'exotic'
import { wording } from '@skava/ui/dist/words'
import { Empty } from '@skava/ui/dist/components/atoms/Empty'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'
import { ApprovalStatusProps } from './typings'
import {
  UserInformationLabel,
  StyledButtonWithIcon,
  StyledDetailedlist,
  StyledDetailedlistRequest,
  StyledUserInformation,
  StyledOrderInformation,
  HeadingWrapper,
  UserInformationHeadingLabel,
  OrderInformationHeadingLabel,
  StyledHeadingValue,
  UserInformationList,
  UserNameValue,
} from './styled'

function renderIconItem(props: ApprovalStatusProps) {
  return <MaterialIcon type="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,
}