'use client'

import { useState } from 'react'
import Grid from '@mui/material/Grid2'
import IngredientDetailInfo from './IngredientDetailInfo'
import IngredientDetailUnit from './IngredientDetailUnit'
import IngredientDetailStockAdjustmentDrawer from './IngredientDetailStockAdjustmentDrawer' // Sesuaikan dengan path file Anda
import { Button } from '@mui/material'
import { useParams } from 'next/navigation'
import { useIngredientById } from '@/services/queries/ingredients'

const IngredientDetail = () => {
  // State untuk mengontrol stock adjustment drawer
  const [openStockAdjustmentDrawer, setOpenStockAdjustmentDrawer] = useState(false)

  const params = useParams()
  const id = params?.id

  const { data, isLoading } = useIngredientById(id as string)

  // Function untuk membuka stock adjustment drawer
  const handleOpenStockAdjustmentDrawer = () => {
    setOpenStockAdjustmentDrawer(true)
  }

  // Function untuk menutup stock adjustment drawer
  const handleCloseStockAdjustmentDrawer = () => {
    setOpenStockAdjustmentDrawer(false)
  }

  // Function untuk handle data dari stock adjustment drawer
  const handleSetStockAdjustmentData = (data: any) => {
    console.log('Stock adjustment data received:', data)
    // Anda bisa menambahkan logic untuk mengupdate state atau API call di sini
    // Misalnya: update stock data, refresh ingredient data, dll.
  }

  return (
    <>
      <Grid container spacing={6}>
        <Grid size={{ xs: 12, lg: 8, md: 7 }}>
          <IngredientDetailInfo data={data} />
        </Grid>
        <Grid size={{ xs: 12, lg: 4, md: 5 }}>
          <Button
            variant='contained'
            fullWidth
            startIcon={<span style={{ fontSize: '18px' }}>+</span>}
            onClick={handleOpenStockAdjustmentDrawer}
            className='mb-4'
            sx={{
              py: 1.5,
              borderRadius: 2,
              textTransform: 'none',
              fontSize: '16px',
              mb: 3 // Menambahkan margin bottom untuk spacing
            }}
          >
            Penyesuaian Stok
          </Button>
          <IngredientDetailUnit data={data} />
        </Grid>
      </Grid>

      {/* Stock Adjustment Drawer */}
      <IngredientDetailStockAdjustmentDrawer
        open={openStockAdjustmentDrawer}
        handleClose={handleCloseStockAdjustmentDrawer}
        setData={handleSetStockAdjustmentData}
      />
    </>
  )
}

export default IngredientDetail
