import type { ReactNode } from "react";
import React, { forwardRef } from "react";
import { useMediaQuery } from "usehooks-ts";

import { cn } from "@/libs/utils";

import { Button } from "../button/button";

export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
  children: ReactNode;
}

const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
  ({ className, children, ...props }, ref) => {
    const Comp = "div";

    const isDesktop = useMediaQuery("(min-width: 768px)");

    return (
      <Comp
        className={cn(
          className,
          "grid grid-flow-row md:grid-flow-col justify-stretch w-full rounded-lg md:border md:border-gray-200 md:shadow-sm",
        )}
        ref={ref}
        {...props}
      >
        {React.Children.map(children, (child, index) => {
          if (React.isValidElement(child) && child.type === Button) {
            let conditionalClass = "";

            if (isDesktop) {
              if (index === 0) {
                conditionalClass =
                  "!rounded-tr-none !rounded-br-none !border-0 !border-r";
              } else if (index === React.Children.count(children) - 1) {
                conditionalClass =
                  "!rounded-tl-none !rounded-bl-none !border-0";
              } else {
                conditionalClass =
                  "!rounded-none !border-y-0 !border-l-0 !border-r";
              }
            }

            // I passed 'any' as type, because I don't know how to type this
            return React.cloneElement<any>(child, {
              key: child.key,
              className: conditionalClass,
            });
          }
          // eslint-disable-next-line no-console
          console.warn("ButtonGroup only accepts Button as children");
          return null;
        })}
      </Comp>
    );
  },
);

ButtonGroup.displayName = "ButtonGroup";
export { ButtonGroup };