import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "@/ui";

import { useMediaQuery } from "@/lib/hooks";
import { t } from "i18next";
import { BlockList } from "./BlockList";

export const BlocksPickerDialog = ({
  isOpen,
  onOpenChange,
  onSelect,
}: {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  onSelect: (data: unknown) => void;
}) => {
  const isDesktop = useMediaQuery("(min-width: 768px)");

  if (isDesktop) {
    return (
      <Dialog modal open={isOpen} onOpenChange={onOpenChange}>
        <DialogContent className='w-full max-w-full md:w-9/12 lg:w-10/12'>
          <DialogHeader>
            <DialogTitle>{t("quotes.blocks_picker_dialog.title")}</DialogTitle>
            <DialogDescription>{t("quotes.blocks_picker_dialog.description")}</DialogDescription>
          </DialogHeader>

          <BlockList onSelect={onSelect} />

          <DialogFooter>
            <Button type='submit' onClick={() => onOpenChange(false)}>
              {t("common.close")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    );
  }

  return (
    <Drawer open={isOpen} onOpenChange={onOpenChange}>
      <DrawerContent>
        <DrawerHeader className='text-left'>
          <DrawerTitle>{t("quotes.blocks_picker_dialog.title")}</DrawerTitle>
          <DrawerDescription>{t("quotes.blocks_picker_dialog.description")}</DrawerDescription>
        </DrawerHeader>

        <BlockList onSelect={onSelect} />

        <DrawerFooter className='pt-2'>
          <DrawerClose asChild>
            <Button variant='outline'>{t("common.close")}</Button>
          </DrawerClose>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
};
