/* eslint-disable brace-style */
import React from 'react'
import toClassName from 'classnames'
import {
  isFunction,
  isString,
  isReal,
  isStringOrNumber,
  EMPTY_OBJ,
  NO_OP,
} from 'exotic'
import { Link } from 'uxui-modules/link-container'
import { DotLoader } from 'features/Animations'
import { classes } from './fixture'
import { Image, isImage } from '../Image'
import { ButtonProps, ButtonState, BaseButtonStandardProps } from './typings'
import { toAccessibleAttributes } from './deps'
import { StyledButton, StyledDiv, ButtonText } from './styled'

// @todo !!!
function renderSnackbarToast(props: ButtonProps, state: ButtonState) {
  // import ToastSnackbar from 'atoms/ToastSnackbar'
  // const { ToastSnackbar } = require('atoms/ToastSnackbar')
  // const snackbarTimeout = props.snackbarTimeout || 100009
  // const snackbarText = props.snackbar || props.snackbarText || 'client customization'
  // const handleToastClose = props.onSnackbarClose || NO_OP
  // const handleUndo = props.onSnackbarClose || NO_OP
  // return (
  //   <ToastSnackbar
  //     key="toast"
  //     autoHideTimeDuration={snackbarTimeout}
  //     message={snackbarText}
  //     onToastClose={handleToastClose}
  //     onToastUndo={handleUndo}
  //   />
  // )
}

export function renderSnackbar(
  props: ButtonProps,
  state: ButtonState,
  view: React.ComponentElement<any, any>
) {
  if (state.isActive !== true) {
    return view
  } else {
    return (
      <React.Fragment>
        {renderSnackbarToast(props, state)}
        {view}
      </React.Fragment>
    )
  }
}

export function renderIcon(props: ButtonProps) {
  const IconComponentOrView = props.icon

  // do we have one?
  if (IconComponentOrView === undefined) {
    return ''
  } else if (React.isValidElement(IconComponentOrView)) {
    // did we already render it?
    return IconComponentOrView
  } else if (isFunction(IconComponentOrView)) {
    // is a class/function/component
    return <IconComponentOrView {...props} key="icon" />
  } else if (isImage(IconComponentOrView)) {
    return <Image src={IconComponentOrView} />
  } else {
    /**
     * @todo depending on event system - @see ReactEvents
     */
    return ''
  }
}

type ButtonElement = typeof StyledButton | typeof StyledDiv
export const toButtonOrLink = (props: ButtonProps): ButtonElement =>
  props.role === 'button' || props.role !== 'link' ? StyledButton : StyledDiv

// props: ButtonProps, state: ButtonState
export function renderButtonOrLink(attributes: BaseButtonStandardProps, state: ButtonState) {
  const accessibleAttributes = toAccessibleAttributes(attributes, state)
  const StyledComponent = toButtonOrLink(attributes)
  const eventHandlers = attributes.eventHandlers
  const value = attributes.children

  return (
    <StyledComponent {...eventHandlers} {...attributes} {...accessibleAttributes}>
      {' '}
      {value}{' '}
    </StyledComponent>
  )
}

/**
 * @todo !!!!!!!!!! this needs finishing for rendering icon & text
 */
export function renderText(props: ButtonProps, state: ButtonState) {
  const { children, isLink, to } = props

  let text = isString(children) ? <ButtonText>{children}</ButtonText> : children

  // const accessibleArea = <span className="button-accessible" />

  // we may pass in a link element manually
  if (isLink === true && to !== undefined) {
    // @todo - linkClassName
    text = <Link to={to}>{text}</Link>
  }

  // if (this.state.isActive === true && this.hasSnackbar === true) {
  //   text = <DotLoader />
  // }
  if (state.isActive === true) {
    text = <DotLoader />
  }
}

export function renderIconAndText(props: ButtonProps, state: ButtonState) {
  const { icon, text } = props

  // @todo - text select none with just an icon
  const hasIconAndText = icon && text

  // add icon if we have one
  // to put icon after, either use `order` or we extend this
  const value = hasIconAndText
    ? // both
      [icon, text]
    : icon
      ? // just icon
        icon
      : // just text
        text

  return value
}