import React from 'react'

import { type ButtonProps } from './Button.models'
import { ButtonWrapperLegacy } from './ButtonComponents/ButtonWrapperLegacy'
import { ButtonWrapper } from './ButtonComponents/ButtonWrapper'
import IconButtonLegacy from './ButtonComponents/IconButtonLegacy'
import IconButton from './ButtonComponents/IconButton'
import { hasValue } from '../../services/HelperServiceTyped'
import { c } from '../../translations/LibraryTranslationService'
import { useToggle } from '../../hooks/useToggle/useToggle'

const Button = (props: ButtonProps): React.JSX.Element => {
  const { children, icon, destructive } = props
  const isTailwindEnabled = useToggle('button_tailwind')

  if (hasValue(children) && icon) {
    throw new Error(c('errorButtonCannotAddBoth'))
  }
  if (!hasValue(children) && !icon) {
    throw new Error(c('errorButtonChooseOne'))
  }

  // Choose implementation based on toggle
  if (isTailwindEnabled) {
    return icon ? (
      <IconButton
        buttonProps={props}
        icon={icon}
        destructive={destructive}
        data-testid={'button'}
      />
    ) : (
      <ButtonWrapper {...props} data-testid={'button'} />
    )
  } else {
    return icon ? (
      <IconButtonLegacy
        buttonProps={props}
        icon={icon}
        destructive={destructive}
        data-testid={'button'}
      />
    ) : (
      <ButtonWrapperLegacy {...props} data-testid={'button'} />
    )
  }
}

export default Button