import type { ReactNode } from 'react'
import React from 'react'
import type { ButtonProps, ButtonCircularProps } from '@toptal/picasso-button'
import { ButtonCompound as Button } from '@toptal/picasso-button'
import { useFormState } from 'react-final-form'

type ButtonTypeProps = {
  buttonType?: 'rectangular'
  variant?: ButtonProps['variant']
  children: ReactNode
}

type CircularButtonTypeProps = {
  buttonType: 'circular'
  variant?: ButtonCircularProps['variant']
}

type ActionButtonTypeProps = {
  buttonType: 'action'
  variant?: null
  children?: ReactNode
}

// Intersection with the type { id?: string } is needed here because of
// TS compiler issue https://github.com/microsoft/TypeScript/issues/34793
export type Props = Omit<ButtonProps, 'type' | 'variant' | 'children'> & {
  id?: string
} & (CircularButtonTypeProps | ActionButtonTypeProps | ButtonTypeProps)

export const SubmitButton = ({
  buttonType = 'rectangular',
  variant,
  ...restOfProps
}: Props) => {
  /* eslint-disable react/jsx-props-no-spreading */
  const { submitting } = useFormState({ subscription: { submitting: true } })

  const submitButtonProps = {
    type: 'submit' as const,
    loading: submitting,
  }

  const resultComponentProps = { ...submitButtonProps, ...restOfProps }

  switch (buttonType) {
    case 'circular':
      return (
        <Button.Circular
          {...resultComponentProps}
          variant={variant as ButtonCircularProps['variant']}
        />
      )
    case 'action':
      return <Button.Action {...resultComponentProps} />
    default:
      return (
        <Button
          {...resultComponentProps}
          variant={variant as ButtonProps['variant']}
        />
      )
  }
}

SubmitButton.displayName = 'SubmitButton'

export default SubmitButton