import Button from '@mui/material/Button'
import type { ButtonProps } from '@mui/material/Button'
import { useMutation, useQueryClient } from '@tanstack/react-query'
import { useUnit } from 'effector-react'
import { addToCart } from '@/entities/cart/api/cart-api'
import { $user } from '@/shared/model/auth'
import { addNotification } from '@/shared/model/notification'

type Props = {
  productId: string
  qty?: number
  loggedOutLabel?: string
} & Omit<ButtonProps, 'onClick'>

export function AddToCartButton(props: Props) {
  const { productId, qty = 1, loggedOutLabel = 'Войдите, чтобы купить', disabled, children, ...rest } = props
  const qc = useQueryClient()
  const user = useUnit($user)

  const addMut = useMutation({
    mutationFn: () => addToCart({ productId, qty }),
    onSuccess: () => {
      void qc.invalidateQueries({ queryKey: ['me', 'cart'] })
      addNotification({
        type: 'success',
        message: 'Товар добавлен в корзину',
        actionLabel: 'Перейти в корзину',
        actionPath: '/cart',
      })
    },
  })

  return (
    <Button
      {...rest}
      disabled={Boolean(disabled) || !user || addMut.isPending}
      onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        addMut.mutate()
      }}
    >
      {user ? (children ?? 'В корзину') : loggedOutLabel}
    </Button>
  )
}