import type { MouseEvent } from 'react'

import { useToggle } from 'hooks'

import { T9n } from 'features/T9n'
import { OutlineButton, Icon } from 'features/UserAccount/styled'

import type { Props } from './components/Form/hooks'
import { AddCardFormInner } from './components/Form'

export const AddCardForm = ({
  initialformOpen,
  inputsBackground,
  submitButton,
}: Props) => {
  const { isOpen, toggle } = useToggle(initialformOpen)

  const onAddClick = (e: MouseEvent) => {
    e.stopPropagation()
    toggle()
  }

  return (
    isOpen
      ? (
        <AddCardFormInner
          inputsBackground={inputsBackground}
          onAddSuccess={toggle}
          submitButton={submitButton}
        />
      )
      : (
        <OutlineButton
          type='button'
          onClick={onAddClick}
        >
          <Icon src='plusIcon' />
          <T9n t='add_card' />
        </OutlineButton>
      )
  )
}