import React, {
  Fragment,
  ReactElement
} from 'react'
import styled from 'styled-components'

import {
  ComponentResponsiveStyled
} from "./../../common/helpers/Theme"

import {
  CustomComponent
} from "../"

interface ButtonBaseInterface {
  children?: string | ReactElement
  label?: string
  name?: string
  icon?: string
  onClick?: any
  type?: "button" | "submit" | "reset"
  themed?: boolean
  small?: boolean
  native?: boolean
  noBackground?: boolean
  lowercase?: boolean
  backgroundColor?: string
  block?: boolean
  styles?: any
}

function ButtonBase(props: ButtonBaseInterface): ReactElement {
  const {
    children,
    label,
    icon
  } = props

  const newProps = Object.assign({}, { ...props })

  delete newProps.children
  delete newProps.small
  delete newProps.themed
  delete newProps.native
  delete newProps.noBackground
  delete newProps.lowercase
  delete newProps.backgroundColor
  delete newProps.icon
  delete newProps.label
  delete newProps.type

  const isSimple = !icon && (children || label)

  return <button {...newProps}>
    { !isSimple && icon && <Fragment>
      <span className="icon">
        {/* <CustomIcon name={icon} /> */}
      </span>

      <span className="label">{ children || label }</span>
    </Fragment> }

    { isSimple && children }

    { isSimple && label }
  </button>
}

const Component: React.FunctionComponent<ButtonBaseInterface> = styled(ButtonBase)<ButtonBaseInterface>`
  ${ props => ComponentResponsiveStyled(props, 'button') }

  > span {
    justify-content: center;
    align-items: center;
    display: flex;
    flex: 1;
  }

  &:hover {
    background: ${ props => props.styles && props.styles.button.default.background.color.hover.smallest || props.theme && props.theme.button.default.background.color.hover.smallest };
    color: ${ props => props.styles && props.styles.button.default.font.color.hover.smallest || props.theme && props.theme.button.default.font.color.hover.smallest };
  }
`

export const Button: React.FunctionComponent<ButtonBaseInterface> = (buttonProps): ReactElement => {
  const {
    native = false
  } = buttonProps

  return !native
    ? <CustomComponent {...buttonProps} callback={(props: ButtonBaseInterface) => <Component {...props} /> } />
    : <ButtonBase {...buttonProps} />
}