import { Drawer, Grid } from "antd";
import queryString from "query-string";
import { useLocation, useNavigate } from "react-router-dom";
import BillDetailEditComponent from "./bill-detail-edit-component";

export default function BillDetailEditcontainer() {
  const search = queryString.parse(useLocation().search);
  const history = useNavigate();

  const screens = Grid.useBreakpoint();
  
  const bpoints = {
    xs: "100%",
    sm: "100%",
    md: "100%",
    lg: "100%",
    xl: "90%",
    xxl: "90%"
  };
  
  let drawerPercentage = "100%";
  if (screens.xxl) drawerPercentage = bpoints.xxl;
  else if (screens.xl) drawerPercentage = bpoints.xl;
  else if (screens.lg) drawerPercentage = bpoints.lg;
  else if (screens.md) drawerPercentage = bpoints.md;
  else if (screens.sm) drawerPercentage = bpoints.sm;
  else if (screens.xs) drawerPercentage = bpoints.xs;

  return (
    <Drawer
      size={drawerPercentage}
      onClose={() => {
        delete search.billid;
        history({ search: queryString.stringify(search) });
      }}
      destroyOnHidden
      open={search.billid}
    >
      <BillDetailEditComponent />
    </Drawer>
  );
}
