import { Drawer, Grid } from "antd";
import React from "react";
import { useNavigate, useSearchParams } 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 [searchParams] = useSearchParams();
  const { selectedvendor } = Object.fromEntries(searchParams);
  const navigate = useNavigate();

  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={() => {
          searchParams.delete("selectedvendor");
          navigate({ search: searchParams.toString() });
        }}
        open={selectedvendor}
      >
        <VendorsFormContainer />
      </Drawer>
    </div>
  );
}