import { type FC, useEffect, useState } from 'react'
import DefaulModal from '@/components/DefaulModal'
import Input from '@/components/Input'
import Button from '@/components/Button'
import type { Food } from '../types/Types'

type Props = {
  food: Food | null
  open: boolean
  onClose: () => void
  onSubmit: (foodId: string, totalStock: number, availableStock: number) => void
  isLoading?: boolean
}

const StockUpdateModal: FC<Props> = ({
  food,
  open,
  onClose,
  onSubmit,
  isLoading = false,
}) => {
  const [totalStock, setTotalStock] = useState(0)
  const [availableStock, setAvailableStock] = useState(0)
  const [error, setError] = useState('')

  useEffect(() => {
    if (food) {
      setTotalStock(food.inventory?.totalStock ?? 0)
      setAvailableStock(food.inventory?.availableStock ?? 0)
      setError('')
    }
  }, [food])

  const handleSubmit = () => {
    if (availableStock > totalStock) {
      setError('موجودی فعلی نمی‌تواند بیشتر از موجودی روزانه باشد')
      return
    }

    if (!food) return

    onSubmit(food.id, totalStock, availableStock)
  }

  return (
    <DefaulModal
      open={open}
      close={onClose}
      isHeader
      title_header='بروزرسانی موجودی'
      width={480}
    >
      {food && (
        <div className='mt-6'>
          <p className='text-sm text-gray-600 mb-5'>
            غذا: <span className='font-medium text-gray-800'>{food.title}</span>
          </p>

          <div className='flex flex-col gap-4'>
            <Input
              name='totalStock'
              label='موجودی روزانه'
              placeholder='عدد'
              type='number'
              seprator
              value={totalStock}
              onChange={(e) => {
                setTotalStock(Number(e.target.value))
                setError('')
              }}
            />

            <Input
              name='availableStock'
              label='موجودی فعلی'
              placeholder='عدد'
              type='number'
              seprator
              value={availableStock}
              onChange={(e) => {
                setAvailableStock(Number(e.target.value))
                setError('')
              }}
              error_text={error}
            />
          </div>

          <div className='flex gap-3 mt-6'>
            <Button
              label='انصراف'
              type='button'
              onClick={onClose}
              className='bg-gray-100 text-gray-700'
            />
            <Button
              label='ذخیره'
              type='button'
              onClick={handleSubmit}
              isloading={isLoading}
            />
          </div>
        </div>
      )}
    </DefaulModal>
  )
}

export default StockUpdateModal