import {
  AppBar,
  Avatar,
  Badge,
  Drawer,
  InputBase,
  Menu,
  MenuItem,
  IconButton,
  Toolbar,
  Typography,
  alpha,
  Button,
  useMediaQuery,
  Stack,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import Box from "@mui/material/Box";
import {  List, ListItem} from "@mui/material";
import React from "react";
import MedicationIcon from "@mui/icons-material/Medication";
import { Notifications } from "@mui/icons-material";
import { useState } from "react";
import MenuIcon from "@mui/icons-material/Menu";
import SearchIcon from "@mui/icons-material/Search";
import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
import LibraryBooksRoundedIcon from "@mui/icons-material/LibraryBooksRounded";
import PowerSettingsNewRoundedIcon from "@mui/icons-material/PowerSettingsNewRounded";
import VpnKeyIcon from "@mui/icons-material/VpnKey";
import AccountCircleIcon from "@mui/icons-material/AccountCircle";
import SideBar1 from "./SideBar1";
import help from "../../assets/images/Help.png";
import { Link } from "react-router-dom";
import {
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
} from "@mui/material";
import { useEffect } from "react";
import PersonIcon from "@mui/icons-material/Person";
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import { styled } from "@mui/material/styles";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import useAxiosPrivate from "../../utils/useAxiosPrivate";
import { Grid, Card, CardContent } from "@mui/material";
import EditIcon from "@mui/icons-material/Edit";

const Accordion = styled((props) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&::before": {
    display: "none",
  },
}));

const AccordionSummary = styled((props) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor: "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
  ...theme.applyStyles("dark", {
    backgroundColor: "rgba(255, 255, 255, .05)",
  }),
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(0),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));
const drawerWidth = 240;
const StyledToolBar = styled(Toolbar)({
  height: "75px",
  display: "flex",
  justifyContent: "space-between",
  padding: "3",
  border: "1px solid #ccc", // Add a border to the toolbar
  "@media (min-width: 100px) and (max-width: 370px)": {
    padding: "3",
    height: "70px",
    width: "80vh",
  },
});

const Icons = styled(Box)(({ theme }) => ({
  display: "none",
  gap: "20px",
  alignItems: "center",
  cursor: "pointer",
  [theme.breakpoints.up("@media (max-width: 965px)")]: {
    display: "flex",
  },
  "@media (max-width: 700px)": {
    gap: "10px",
  },
  "@media (max-width: 480px)": {
    gap: "5px",
  },
}));

const UserBox = styled(Box)(({ theme }) => ({
  display: "flex",
  gap: "10px",
  alignItems: "center",
  cursor: "pointer",
  [theme.breakpoints.up("@media (max-width: 965px)")]: {
    display: "none",
  },
  "@media (max-width: 700px)": {
    gap: "5px",
  },
  "@media (max-width: 480px)": {
    gap: "3px",
  },
}));

const Search = styled("div")(({ theme }) => ({
  position: "relative",
  borderRadius: "20px",
  backgroundColor: "#F3F3F3",
  "&:hover": {
    backgroundColor: "#F3F3F3",
  },
  marginLeft: 0,
  width: "100%",
  [theme.breakpoints.up("md")]: {
    marginLeft: theme.spacing(0),
    width: "auto",
  },
}));

const SearchIconWrapper = styled("div")(({ theme }) => ({
  padding: theme.spacing(0, 2),
  height: "100%",
  position: "absolute",
  pointerEvents: "none",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: "#A9A9A9",
  "& .MuiInputBase-input": {
    padding: theme.spacing(1, 1, 1, 0),
    paddingLeft: `calc(1em + ${theme.spacing(4)})`,
    transition: theme.transitions.create("width"),
    width: "100%",
    [theme.breakpoints.up("md")]: {
      width: "20ch",
    },
  },
}));

const NewHeader = () => {
  const [open, setOpen] = useState(false);
  const [toggleDrawer, setToggleDrawer] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [openPopup, setOpenPopup] = useState(false);
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up("965px"));
  const handleDrawerToggle = () => {
    setMobileOpen(!mobileOpen);
  };
const [patients, setPatients] = useState([]); // To store the patient data
const [searchName, setSearchName] = useState(""); // To store the search query
const [error, setError] = useState(null); // To handle errors
const [filteredPatients, setFilteredPatients] = useState([]);
const axiosClientPrivate = useAxiosPrivate();
const [showList, setShowList] = useState(false);
const [selectedPatientId, setSelectedPatientId] = useState(null);
const [selectedPatientName, setSelectedPatientName] = useState(null);
const [opd, setOpd] = useState([]);
const [inj, setInj] = useState([]);
const [isTyping, setIsTyping] = useState(false); 

//  for Opd
  useEffect(() => {
    const controller = new AbortController();
    const fetchOpd = async () => {
      try {
        const response = await axiosClientPrivate.get(
          `employee-appointments/opd/${selectedPatientId}`,
          {
            signal: controller.signal,
          }
        );
        console.log("response",response);
        const items = response.data;
        console.log("items opd", items);
        const opd = items.map((item) => {
          return {
             id: item.id,
            ticketNo: item.ticketNo,        
            complaints: item.complaints,
            appointmentDate: item.appointmentDate,
            recommendedTests: item.recommendedTests,
          };
        });

        setOpd(opd);
        console.log("check opd", opd);
      } catch (error) {
        console.error("Error fetching opd:", error);
      }
    };

    fetchOpd();
    return () => {
      controller.abort();
    };
  }, [selectedPatientId]);

  //for injury
    useEffect(() => {
      const controller = new AbortController();
      const fetchInj = async () => {
        try {
          const response = await axiosClientPrivate.get(
            `employee-appointments/injury/${selectedPatientId}`,
            {
              signal: controller.signal,
            }
          );
          console.log("response inj", response);
          const items = response.data;
          console.log("items inj", items);
          const inj = items.map((item) => {
            return {
              id: item.id,
              ticketNo: item.ticketNo,
              complaints: item.complaints,
              appointmentDate: item.appointmentDate,
              recommendedTests: item.recommendedTests,
            };
          });

          setInj(inj);
          console.log("check Inj", inj);
        } catch (error) {
          console.error("Error fetching Inj:", error);
        }
      };

      fetchInj();
      return () => {
        controller.abort();
      };
    }, [selectedPatientId]);

  // Handle input change for search
  const handleInputChange = (event) => {
    const term = event.target.value;
    console.log("search", term);
    setSearchName(term);
    setIsTyping(true);
  };

  useEffect(() => {
    const controller = new AbortController();
    // Only call the API if searchName is not empty
    if (searchName) {
      const fetchPatient = async () => {
        try {
          const response = await axiosClientPrivate.get(
            `/patients/patient-search?name=${searchName}`,
            {
              signal: controller.signal,
            }
          );
          console.log(response);
          const items = response.data;
      
          const processedPatients = items.map((patient) => ({
            id: patient.id,
            label: patient.patientName,
          }));

          console.log("Processed Patients", processedPatients);

          setPatients(processedPatients);
        } catch (error) {
          console.error("Error fetching Patients:", error);
        }
      };
      fetchPatient();
      return () => {
        controller.abort();
      };
    }
  }, [searchName]);

  // Filter patients based on search input
  useEffect(() => {

    if (searchName) {
      const filtered = patients.filter((patient) =>
        patient.label.toLowerCase().includes(searchName.toLowerCase())
      );
      setFilteredPatients(filtered);
      
    } else {
      setFilteredPatients([]); // Clear filtered patients if no search term
    }
  }, [searchName, patients]);
  console.log("filtered", filteredPatients);

  const container =
    window !== undefined ? () => window.document.body : undefined;

  return (
    <div
      style={{
        fontSize: theme.breakpoints.up("sm") ? "18px" : "5px",
        lineHeight: theme.breakpoints.between("md", "lg") ? "1" : "1",
        fontWeight: theme.breakpoints.down("xs") ? "bold" : "normal",
      }}
    >
      <AppBar
        position="sticky"
        sx={{
          backgroundColor: "white",
          width: "100%",
          "@media (min-width: 100px) and (max-width: 370px)": {
            width: "80vh",
          },
          "@media (min-width: 380px) and (max-width: 450px)": {
            width: "60vh",
          },
        }}
        elevation={0}
      >
        <StyledToolBar>
          <Box
            sx={{
              display: {
                lg: "none",
              },
            }}
          >
            <IconButton
              color="black"
              aria-label="open drawer"
              edge="start"
              onClick={handleDrawerToggle}
            >
              <MenuIcon />
            </IconButton>
          </Box>

          <Typography
            variant="h6"
            sx={{ display: { xs: "none", md: "block" }, color: "blue" }}
          >
            <Drawer open={toggleDrawer} onClose={handleDrawerToggle}></Drawer>
            <img
              src={"/ohctech_logo.jpeg"}
              width="150"
              height="20"
              alt="Logo"
            />
          </Typography>
          <MedicationIcon sx={{ display: { xs: "block", md: "none" } }} />

          <Search>
            <SearchIconWrapper>
              <SearchIcon />
            </SearchIconWrapper>
            <StyledInputBase
              placeholder="Navigate To…"
              inputProps={{ "aria-label": "search" }}
            />
          </Search>
          <Box sx={{ position: "relative" }}>
            {" "}
            {/* Wrapping Box to control positioning */}
            <Search>
              <SearchIconWrapper>
                <SearchIcon />
              </SearchIconWrapper>
              <StyledInputBase
                placeholder="Search…"
                inputProps={{ "aria-label": "search" }}
                value={searchName}
                onChange={handleInputChange}
                onClick={() => setShowList(true)}
              />
            </Search>
            {showList && (
              <Box
                sx={{
                  position: "absolute",
                  top: "100%",
                  left: 0,
                  width: "100%",
                  backgroundColor: "#f0f0f5",
                  padding: "8px",
                  borderRadius: "4px",
                  boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
                  maxHeight: "200px",
                  overflowY: "auto",
                  zIndex: 1,
                }}
              >
                <List>
                  {filteredPatients.length > 0
                    ? filteredPatients.map((patient) => (
                        <ListItem
                          key={patient.id}
                          onClick={() => {
                            setSelectedPatientId(patient.id); // Store patient ID
                            setSelectedPatientName(patient.label);
                            setOpenPopup(true);
                            setIsTyping(false);
                          }}
                          sx={{
                            color: "#333",
                            padding: "8px",
                            cursor: "pointer",
                            "&:hover": {
                              backgroundColor: "#d1e3ff",
                              color: "#0056b3",
                            },
                          }}
                        >
                          <Typography variant="body2">
                            {patient.label}
                          </Typography>
                        </ListItem>
                      )): 
                      isTyping && (
                        <ListItem sx={{ color: "#333" }}>
                          <Typography variant="body2">
                            No patients found
                          </Typography>
                        </ListItem>
                      )}
                </List>
              </Box>
            )}
          </Box>

          <Typography
            variant="h7"
            sx={{
              display: { xs: "none", md: "block" },
              color: "#41B06E",
              "@media (max-width: 790px)": {
                fontSize: "13px",
              },
            }}
          >
            Occupational Health Center
            <Typography
              sx={{
                color: "#45474B",
                "@media (max-width: 790px)": {
                  fontSize: "12px",
                },
              }}
            >
              (Delhi, Plant OHC)
            </Typography>
          </Typography>
          <Icons>
            <img src={help} width="20" />
            <Badge
              badgeContent={1}
              color="error"
              sx={{
                backgroundColor: "#0766AD",
                borderRadius: "20px",
                width: "35px",
                height: "35px",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <Notifications />
            </Badge>
            <Avatar
              sx={{ width: 30, height: 30, border: "black" }}
              src=""
              onClick={() => setOpen(true)}
            />
            <Typography
              variant="subtitle1"
              component={"div"}
              sx={{ color: "#45474B" }}
              onClick={() => setOpen(true)}
            >
              ADMIN1,
              <Typography
                variant="subtitle2"
                sx={{ color: "#45474B", fontSize: "12px" }}
                onClick={() => setOpen(true)}
              >
                Doctor
              </Typography>
            </Typography>
          </Icons>
          <UserBox>
            <Avatar
              sx={{ width: 30, height: 30 }}
              // src=""
              onClick={() => setOpen(true)}
            />
            <Typography
              variant="subtitle1"
              component={"div"}
              sx={{ color: "#45474B", fontSize: "10px" }}
              onClick={() => setOpen(true)}
            >
              ADMIN1,
              <Typography
                variant="subtitle2"
                sx={{ color: "#45474B", fontSize: "7px" }}
                onClick={() => setOpen(true)}
              >
                Doctor
              </Typography>
            </Typography>
          </UserBox>
        </StyledToolBar>
        <Menu
          sx={{ mt: "60px" }}
          id="menu-appbar"
          aria-labelledby="demo-positioned-button"
          open={open}
          onClose={() => {
            setOpen(false);
          }}
          anchorOrigin={{
            vertical: "top",
            horizontal: "right",
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left",
          }}
        >
          <MenuItem>
            <AccountCircleIcon />
            Profile
          </MenuItem>
          <MenuItem>
            <SwapHorizIcon />
            <Link to="/ohcSelection">Switch OHC</Link>
          </MenuItem>
          <MenuItem>
            <SwapHorizIcon />
            <Link to="/roleSelection">Switch Role</Link>
          </MenuItem>
          <MenuItem>
            <VpnKeyIcon />
            Change Password
          </MenuItem>
          <MenuItem>
            <LibraryBooksRoundedIcon />
            Read Manual
          </MenuItem>
          <MenuItem>
            <PowerSettingsNewRoundedIcon />
            Logout
          </MenuItem>
        </Menu>
      </AppBar>
      <Drawer
        container={container}
        variant="temporary"
        open={mobileOpen}
        onClose={handleDrawerToggle}
        ModalProps={{
          keepMounted: true,
        }}
      >
        <SideBar1 />
      </Drawer>
      <Dialog
        open={openPopup}
        fullWidth
        PaperProps={{
          sx: {
            alignSelf: "flex-start",
          },
        }}
        maxWidth={"lg"}
      >
        <DialogTitle>
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "center",
              width: "100%",
            }}
          >
            <Stack
              direction={"row"}
              sx={{
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              <PersonIcon sx={{ color: "#229fec" }} />
              <Typography variant="h6" sx={{ flexGrow: 1, color: "#229fec" }}>
                {selectedPatientName}
              </Typography>
            </Stack>
          </Box>
        </DialogTitle>

        <DialogContent dividers>
          <Box
            sx={{
              width: "100%",
              display: "flex",
              flexDirection: "row",
              gap: 1,
              justifyContent: "space-around",
              alignItems: "flex-start",
            }}
          >
            <Accordion
              sx={{
                width: "25%",
                marginBottom: 2,
                mt: 1,
                border: "0",
              }}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
                aria-controls="panel1-content"
                id="panel1-header"
                sx={{
                  borderRadius: "10px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  "&:hover": {},
                  "&.Mui-expanded": {},
                  "& .MuiAccordionSummary-content": {
                    fontWeight: "bold",
                    justifyContent: "center",
                  },
                }}
              >
                <Typography variant="body1" color={"#00796b"}>
                  {" "}
                  Recent OPD{" "}
                </Typography>
              </AccordionSummary>
              <AccordionDetails>
                {opd.length > 0 ? (
                  opd.map((item) => (
                    <Card
                      key={item.id}
                      sx={{
                        width: "100%",
                        borderRadius: "10px",
                        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                        marginBottom: 2,
                      }}
                    >
                      <CardContent
                        sx={{
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          alignItems: "center",
                          width: "100%",
                        }}
                      >
                        <Typography variant="body2">
                          Ticket No: {item.ticketNo}
                        </Typography>
                        <Typography variant="body2">
                          Appointment Date: {item.appointmentDate}
                        </Typography>

                        <Typography
                          variant="body2"
                          sx={{ fontWeight: "bold", marginTop: 1 }}
                        >
                          Complaints:
                        </Typography>
                        {item.complaints.length > 0 ? (
                          item.complaints.map((complaint, index) => (
                            <Typography key={index} variant="body2">
                              - {complaint.label}
                            </Typography>
                          ))
                        ) : (
                          <Typography variant="body2">No Complaints</Typography>
                        )}

                        <Typography
                          variant="body2"
                          sx={{ fontWeight: "bold", marginTop: 1 }}
                        >
                          Recommended Tests:
                        </Typography>
                        {item.recommendedTests.length > 0 ? (
                          item.recommendedTests.map((test, index) => (
                            <Typography key={index} variant="body2">
                              - {test.label}
                            </Typography>
                          ))
                        ) : (
                          <Typography variant="body2">
                            No Recommended Tests
                          </Typography>
                        )}
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <Typography variant="body2">No OPD Done Yet</Typography>
                )}
              </AccordionDetails>
            </Accordion>
            <Accordion
              sx={{
                marginBottom: 2,
                width: "25%",
                mt: 1,
                border: "0",
              }}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
                aria-controls="panel12-content"
                id="panel2-header"
                sx={{
                  borderRadius: "10px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  "& .MuiAccordionSummary-content": {
                    fontWeight: "bold",
                    justifyContent: "center",
                  },
                }}
              >
                <Typography variant="body1" color={"#00796b"}>
                  Recent Injury
                </Typography>
              </AccordionSummary>
              <AccordionDetails>
                {inj.length > 0 ? (
                  inj.map((item) => (
                    <Card
                      key={item.id}
                      sx={{
                        width: "100%",
                        borderRadius: "10px",
                        boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                        marginBottom: 2,
                      }}
                    >
                      <CardContent
                        sx={{
                          display: "flex",
                          flexDirection: "column",
                          justifyContent: "center",
                          alignItems: "center",
                          width: "100%",
                        }}
                      >
                        <Typography variant="body2">
                          Ticket No: {item.ticketNo}
                        </Typography>
                        <Typography variant="body2">
                          Appointment Date: {item.appointmentDate}
                        </Typography>

                        <Typography
                          variant="body2"
                          sx={{ fontWeight: "bold", marginTop: 1 }}
                        >
                          Complaints:
                        </Typography>
                        {item.complaints.length > 0 ? (
                          item.complaints.map((complaint, index) => (
                            <Typography key={index} variant="body2">
                              - {complaint.label}
                            </Typography>
                          ))
                        ) : (
                          <Typography variant="body2">No Complaints</Typography>
                        )}

                        <Typography
                          variant="body2"
                          sx={{ fontWeight: "bold", marginTop: 1 }}
                        >
                          Recommended Tests:
                        </Typography>
                        {item.recommendedTests.length > 0 ? (
                          item.recommendedTests.map((test, index) => (
                            <Typography key={index} variant="body2">
                              - {test.label}
                            </Typography>
                          ))
                        ) : (
                          <Typography variant="body2">
                            No Recommended Tests
                          </Typography>
                        )}
                      </CardContent>
                    </Card>
                  ))
                ) : (
                  <Typography variant="body2">No Injury Done Yet</Typography>
                )}
              </AccordionDetails>
            </Accordion>

            <Accordion
              sx={{
                marginBottom: 2,
                width: "25%",
                mt: 1,
                border: "0",
              }}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
                aria-controls="panel3-content"
                id="panel3-header"
                sx={{
                  borderRadius: "10px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  "&:hover": {},
                  "&.Mui-expanded": {},
                  "& .MuiAccordionSummary-content": {
                    fontWeight: "bold",
                    justifyContent: "center", // Center text horizontally
                  },
                }}
              >
                <Typography variant="body1" color={"#00796b"}>
                  {" "}
                  Recent Medical Examination{" "}
                </Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Card
                  sx={{
                    width: "100%",
                    borderRadius: "10px",
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                  }}
                >
                  <CardContent
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "center",
                      alignItems: "center",
                      width: "100%",
                    }}
                  >
                    <Typography variant="body2">
                      No Medical Examination Done Yet
                    </Typography>
                    <Button
                      variant="contained"
                      sx={{ marginTop: 1 }}
                      fullWidth
                      size="small"
                      color="success"
                    >
                      New Medical
                    </Button>
                  </CardContent>
                </Card>
              </AccordionDetails>
            </Accordion>

            <Accordion
              sx={{
                marginBottom: 2,
                width: "25%",
                mt: 1,
                border: "0",
              }}
            >
              <AccordionSummary
                expandIcon={<ExpandMoreIcon sx={{ color: "#00796b" }} />}
                aria-controls="panel4-content"
                id="panel4-header"
                sx={{
                  borderRadius: "10px",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  "& .MuiAccordionSummary-content": {
                    fontWeight: "bold",
                    justifyContent: "center", // Center text horizontally
                  },
                }}
              >
                <Typography variant="body1" color={"#00796b"}>
                  {" "}
                  Recent Sickness/Fitness{" "}
                </Typography>
              </AccordionSummary>
              <AccordionDetails>
                <Card
                  sx={{
                    width: "100%",
                    borderRadius: "10px",
                    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                  }}
                >
                  <CardContent
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                      justifyContent: "center",
                      alignItems: "center",
                      width: "100%",
                    }}
                  >
                    <Typography variant="body2">
                      No Sickness Done Yet
                    </Typography>
                    <Button
                      variant="contained"
                      sx={{ marginTop: 1 }}
                      fullWidth
                      size="small"
                      color="success"
                    >
                      New Sickness
                    </Button>
                  </CardContent>
                </Card>
              </AccordionDetails>
            </Accordion>
          </Box>
        </DialogContent>
        <DialogActions>
          <Button
            type="submit"
            variant="outlined"
            onClick={() => setOpenPopup(false)}
          >
            cancel
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
};
export default NewHeader;