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

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

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

  const selectedCompany = useMemo(() => {
    return companies.find((c) => c.value == filter.company)
  }, [companies, filter.company])

  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?companyId=${filter.company}`, {
        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>

            <div className='text-xs p-4 bg-danger-600 text-neutral-50 rounded-medium mt-4 flex items-center gap-x-4'>
              <div>
                <AlertTriangleIcon size={28} />
              </div>
              <span>
                Hati-hati aksi ini akan menghapus semua data produk dan hasil stock opname di perusahaan {selectedCompany?.label}
              </span>
            </div>
          </form>
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}

export default ImportModal