import type { MouseEvent } from 'react'

import { useToggle } from 'hooks'

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

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

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

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

  const onSuccess = () => {
    onAddSuccess?.()
    toggle()
  }

  return (
    isOpen
      ? (
        <AddCardFormInner
          onAddSuccess={onSuccess}
        >
          <SolidButton type='submit'>
            <T9n t='save' />
          </SolidButton>
        </AddCardFormInner>
      )
      : (
        <OutlineButton
          type='button'
          onClick={onAddClick}
        >
          <Icon src='plusIcon' />
          <T9n t='add_card' />
        </OutlineButton>
      )
  )
}
