import toast from '@/common/libs/toast'
import { Button, Modal, ModalBody, ModalContent, ModalHeader } from '@nextui-org/react'
import { useMutation } from '@tanstack/react-query'
import React, { ChangeEvent, FormEvent, useState } from 'react'

type Props = {
  modal: {
    isOpen: boolean,
    onOpenChange: () => void
  }
}

const ImportModal = ({ modal }: Props) => {
  const [file, setFile] = useState<File>()

  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) setFile(e.target.files[0])
  }

  const importMutation = useMutation({
    mutationKey: ['import-product'],
    mutationFn: async () => {
      if (!file) return
      return await fetch('/api/product/import', {
        method: 'POST',
        body: file,
        headers: { 'content-type': file.type, 'content-length': `${file.size}` }
      })
    },
    onSuccess(data) {
      if (data?.status === 200) {
        toast('Berhasil import product')
        setFile(undefined)
      } else {
        toast('Gagal import product')
      }
    },
  })

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    importMutation.mutate()
  }

  return (
    <Modal isOpen={modal.isOpen} onOpenChange={modal.onOpenChange}>
      <ModalContent>
        <ModalHeader>Import Product</ModalHeader>
        <ModalBody>
          <form className='pb-6' onSubmit={handleSubmit}>
            <input type='file' onChange={handleFileChange} accept='.xls, .xlsx' />
            <Button type='submit' color='primary' className='mt-4 w-full' isDisabled={!file || importMutation.isPending}>
              {importMutation.isPending ? 'Loading...' : 'Submit'}
            </Button>
          </form>
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}

export default ImportModal