import { Card, Grid, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { DetailFinalLogType } from "../FinalLog/Model/Types";
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import DialogMedicine from "../FinalLog/Components/DialogMedicine";
import { fNumber } from "@/utils/formatNumber";
import { Button } from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { useState } from "react";

type CardDetail = {
    requestLog: DetailFinalLogType|undefined; 
}

const style1 = {
    color: '#919EAB',
    width: '30%'
}
const style2 = {
    width: '70%'
}
const marginBottom1 = {
    marginBottom: 1,
}
const marginBottom2 = {
    marginBottom: 2,
}

const [openDialogMedicine, setDialogMedicine] = useState(false);


export default function CardMedicine({requestLog} : CardDetail ) {
    return (
        <Card sx={{padding:2}}  >
            <Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
                <Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Medicine</Typography>
                    <Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
                        setDialogMedicine(true)
                    }} >
                        <Typography variant="button" display="block">Medicine</Typography>
                    </Button>
            </Stack>

            {requestLog?.medicine.map((item, index) => (
                <Grid
                    container
                    direction="row"
                    alignItems="center"
                    justifyContent="space-between"  // Menempatkan item ke sebelah kiri dan kanan
                    sx={{ marginBottom: 2 }}
                >
                    <Typography variant='subtitle1'>{item.medicine}</Typography>
                    <Typography variant="subtitle1">Rp. {fNumber(item.price)}</Typography>
                </Grid>
            ))}

            {/* <DialogMedicine
                requestLog={requestLog}
                openDialog={openDialogMedicine}
                setOpenDialog={setDialogMedicine}
            /> */}
        </Card>
    )
   
}