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

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

  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.push({ search: queryString.stringify(search) });
      }}
      destroyOnClose
      visible={search.billid}
    >
      <BillDetailEditComponent />
    </Drawer>
  );
}