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 selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
    .slice(-1)[0];

  const bpoints = {
    xs: "100%",
    sm: "100%",
    md: "100%",
    lg: "100%",
    xl: "90%",
    xxl: "90%"
  };
  const drawerPercentage = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : "100%";

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