import { Drawer, Grid } from "antd";
import queryString from "query-string";
import React from "react";
import { useHistory, useLocation } from "react-router-dom";
import VendorsFormContainer from "../../components/vendors-form/vendors-form.container";
import VendorsListContainer from "../../components/vendors-list/vendors-list.container";

export default function ShopVendorPageComponent() {
  const search = queryString.parse(useLocation().search);
  const { selectedvendor } = 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: "50%",
    xl: "50%",
    xxl: "45%",
  };
  const drawerPercentage = selectedBreakpoint
    ? bpoints[selectedBreakpoint[0]]
    : "100%";

  return (
    <div>
      <VendorsListContainer />

      <Drawer
        width={drawerPercentage}
        onClose={() => {
          delete search.selectedvendor;
          history.push({ search: queryString.stringify(search) });
        }}
        visible={selectedvendor}
      >
        <VendorsFormContainer />
      </Drawer>
    </div>
  );
}
