import { Drawer, Grid } from "antd";
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 screens = Grid.useBreakpoint();
  
  const bpoints = {
    xs: "100%",
    sm: "100%",
    md: "100%",
    lg: "50%",
    xl: "50%",
    xxl: "45%"
  };
  
  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 (
    <div>
      <VendorsListContainer />
      <Drawer
        size={drawerPercentage}
        onClose={() => {
          searchParams.delete("selectedvendor");
          navigate({ search: searchParams.toString() });
        }}
        open={selectedvendor}
      >
        <VendorsFormContainer />
      </Drawer>
    </div>
  );
}
