// @mui
import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Grid, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination } from '@mui/material';
import { LoadingButton } from "@mui/lab";
import { CachedOutlined, FindInPageOutlined } from '@mui/icons-material';
// hooks
import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
import useSettings from '../../../../hooks/useSettings';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { RHFSelect, FormProvider } from '@/components/hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
// components
import axios from '../../../../utils/axios';
import Label from '@/components/Label';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import DialogUpdateStatus from '@/components/DialogUpdateStatus'
import * as Yup from 'yup';
import { FormulariumData } from "../Type";


type Props = {
  props: FormulariumData,
  isActive: number,
}

export default function DetailFormularium({props, isActive} : Props) {
  const [open, setOpen] = React.useState(false);


  return (
    <TableBody>
      <TableRow>
        <TableCell align='left' width={50} />
        <TableCell align='left'>{props.code}</TableCell>
        <TableCell align='left'>{props.atc_code}</TableCell>
        <TableCell align='left'>{props.name}</TableCell>
        <TableCell align='left'>{props.category_name}</TableCell>
        <TableCell align='left'>{props.uom}</TableCell>
        <TableCell align='left'>
          {isActive == 1 ? (
            <Label color='success'>Active</Label>
          ) : (
            <Label color='error'>Inactive</Label>
          )}
        </TableCell>
        <TableCell align='center' width={100}>
          <TableMoreMenu actions = {
            <>
              <MenuItem onClick={() => setOpen(!open)}>
                <FindInPageOutlined />
                Detail
              </MenuItem>
            </>
          } />
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell colSpan={8} style={{paddingBottom: 0, paddingTop: 0}}>
          <Collapse in={open} timeout='auto' unmountOnExit>
            <Card sx={{paddingX:2, paddingY:2, marginBottom:3}}>
              <Box sx={{margin: 1, pb: 2}}>
                <Grid container>
                  <Grid item>
                    <Typography sx={{fontWeight: '600', mb: 1}}>Detail</Typography>
                    <Grid container>
                    <Grid item xs={2}>Description</Grid>
                      <Grid item xs={10}> : {props.description}</Grid>

                      <Grid item xs={2}>General Indication</Grid>
                      <Grid item xs={10}> : {props.general_indication}</Grid>

                      <Grid item xs={2}>Composition</Grid>
                      <Grid item xs={10}> : {props.composition}</Grid>

                      <Grid item xs={2}>Kategori Obat</Grid>
                      <Grid item xs={10}> : {props.kategori_obat}</Grid>

                      <Grid item xs={2}>BPOM Registration</Grid>
                      <Grid item xs={10}> : {props.bpom_registration}</Grid>

                      <Grid item xs={2}>Classification</Grid>
                      <Grid item xs={10}> : {props.classifications}</Grid>

                      <Grid item xs={2}>Cat For</Grid>
                      <Grid item xs={10}> : {props.cat_for}</Grid>

                      <Grid item xs={2}>Class</Grid>
                      <Grid item xs={10}> : {props.class}</Grid>

                      <Grid item xs={2}>Manufacturer</Grid>
                      <Grid item xs={10}> : {props.manufacturer}</Grid>
                    </Grid>
                  </Grid>
                </Grid>
              </Box>
            </Card>
          </Collapse>
        </TableCell>
      </TableRow>
    </TableBody>
  )
}