import React, { SyntheticEvent } from 'react'
import { isFunction, isSafe } from 'exotic'
import { application } from '@skava/state'
import { wording } from '@skava/ui/dist/words'
import { PaymentsCardIcon } from '@skava/ui/dist/components/atoms/Icons'
import { ConfirmationCard } from '@skava/ui/dist/components/organisms/ConfirmationCard'
import { PaymentCardProps } from './typings'
import {
  RemoveButton,
  OptionLabel,
  PaymentOption,
  ToggleButton,
  GiftBalanceLabel,
  GiftBalanceAmount,
  CardExpiry,
  CardTitle,
  StyledMaterialIcon,
} from './styled'

/**
 * render payment method type
 */
function defaultRenderTogglePaymentMethod(props: PaymentCardProps) {
  const {
    optionLabel,
    state,
    onPaymentChange,
    onTogglePaymentMethod,
    isSelected,
    cardIdentifier,
  } = props

  const handleClick = args => {
    if (isFunction(onPaymentChange)) {
      onPaymentChange(args)
      if (isFunction(onTogglePaymentMethod)) {
        onTogglePaymentMethod(cardIdentifier)
      }
    }
  }

  return (
    state.isExpanded === false &&
    state.isConfirming === false && (
      <PaymentOption data-qa={isSelected === true ? 'qa-facet-selected' : 'qa-facet'}>
        <StyledMaterialIcon
          onClick={handleClick}
          type={isSelected ? 'radio_on' : 'radio_off'}
          isSelected={isSelected}
        />
        <OptionLabel content={optionLabel} />
      </PaymentOption>
    )
  )
}

/**
 * render remove button
 */
function defaultRenderRemoveButton(props: PaymentCardProps) {
  const {
    state,
    onRemovePaymentConfirm,
    onRemovePaymentCancel,
    cardIdentifier,
  } = props
  const handleConfirmation = () => {
    state.handleConfirmCancel()
    if (isFunction(onRemovePaymentConfirm)) {
      onRemovePaymentConfirm(cardIdentifier)
    }
  }
  const handleCancel = (event: SyntheticEvent<HTMLButtonElement>) => {
    state.handleConfirmCancel()
    if (isFunction(onRemovePaymentCancel)) {
      onRemovePaymentCancel(event)
    }
  }
  const view =
    state.isConfirming === true ? (
      <ConfirmationCard
        onConfirmation={handleConfirmation}
        onCancel={handleCancel}
      />
    ) : (
      state.isExpanded === false && (
        <RemoveButton
          text={wording.remove}
          breedType="text"
          onClick={state.handleConfirm}
        />
      )
    )

  return view
}

/**
 * render edit button
 */
function defaultRenderButton(props: PaymentCardProps) {
  const { state, onPaymentEdit } = props
  const iconType = state.isExpanded ? 'expand_less' : 'expand_more'

  const labelText = application.isDesktop
    ? wording.editInformation
    : wording.edit
  const handleClick = () => {
    state.handleToggle()
    if (isFunction(onPaymentEdit)) {
      onPaymentEdit(state)
    }
  }
  return (
    <ToggleButton
      text={labelText}
      breedType={'text-with-icon'}
      iconType={iconType}
      iconAlignType={'suffix'}
      onClick={handleClick}
      isConfirming={state.isConfirming}
    />
  )
}

/**
 * render payment balance
 */
function defaultRenderBalance(props: PaymentCardProps) {
  const { giftBalanceAmount } = props
  return (
    isSafe(giftBalanceAmount) && (
      <React.Fragment>
        <GiftBalanceLabel content={wording.balance} />
        <GiftBalanceAmount content={giftBalanceAmount} />
      </React.Fragment>
    )
  )
}

/**
 * render payment card title / number
 */
function defaultRenderCardDetail(props: PaymentCardProps) {
  const { cardTitle, cardExpiry } = props
  return (
    <React.Fragment>
      <CardTitle content={cardTitle} />
      <CardExpiry content={cardExpiry} />
    </React.Fragment>
  )
}

/**
 * local function for getting breed type based on the type of icon
 */
function getIconBreedType(cardType: string) {
  const getType = {
    visa: 'business-with-background',
    master: 'with-background',
  }
  return getType[cardType]
}

/**
 * render payment card icon
 */
function defaultRenderIcon(props: PaymentCardProps) {
  const { cardType } = props
  return (
    <PaymentsCardIcon
      data-qa={'qa-card-logo'}
      type={cardType}
      breed={getIconBreedType(cardType)}
      width={'76'}
    />
  )
}

export {
  defaultRenderRemoveButton,
  defaultRenderTogglePaymentMethod,
  defaultRenderButton,
  defaultRenderBalance,
  defaultRenderCardDetail,
  defaultRenderIcon,
}