/* eslint-disable jsx-a11y/interactive-supports-focus */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import type { VariantProps } from "class-variance-authority";
import { cva } from "class-variance-authority";

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

const triggerButtonVariants = cva(
  "flex w-full cursor-pointer select-none rounded-primary border border-gray-200 shadow-sm active:border-primary-200 active:ring-2 active:ring-primary-50",
  {
    variants: {
      size: {
        md: "h-[44px] max-w-[162px] px-[16px] py-[10px]",
        lg: "h-[54px] px-[12px]",
      },
      isFocus: {
        true: "border-primary-200 ring-2 ring-primary-50",
      },
      fullWidth: {
        true: "max-w-full",
      },
      invalid: {
        true: "!border-red-500",
      },
    },
    defaultVariants: {
      size: "md",
      isFocus: false,
    },
  },
);

const labelVariants = cva(
  "select-none items-center truncate text-gray-500 md:flex",
  {
    variants: {
      size: {
        md: "h-[24px] max-w-[80px] text-base",
        lg: "h-[20px] text-sm md:h-[30px]",
      },
      hasValue: {
        true: "h-[18px] text-xs md:h-[18px]",
      },
      fullWidth: {
        true: "!max-w-full",
      },
    },
    defaultVariants: {
      size: "lg",
    },
  },
);

const valueVariants = cva("line-clamp-1 flex items-center whitespace-nowrap", {
  variants: {
    size: {
      md: "h-5 text-sm",
      lg: "h-5 text-sm",
    },
  },
  defaultVariants: {
    size: "lg",
  },
});

const iconVariants = cva(
  "order-first flex h-full w-[20px] items-center text-gray-500",
  {
    variants: {
      size: {
        md: "mr-2 text-sm",
        lg: "mr-3 text-sm",
      },
      iconHiddenOnMobile: {
        true: "hidden lg:flex",
      },
    },
    defaultVariants: {
      size: "md",
    },
  },
);

export interface TriggerButtonProps
  extends VariantProps<typeof triggerButtonVariants> {
  id?: string;
  label?: string;
  value?: string;
  placeholder?: string;
  iconHiddenOnMobile?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  className?: string;
  fullWidth?: boolean;
  onClick?: () => void;
  isInvalid?: boolean;
}

const TriggerButton = ({
  id,
  size,
  value,
  placeholder,
  label,
  isFocus,
  leftIcon,
  rightIcon,
  iconHiddenOnMobile,
  className,
  fullWidth,
  isInvalid,
  onClick,
}: TriggerButtonProps) => {
  const hasValue =
    (!!value && value !== "") || (!!placeholder && placeholder !== "");

  return (
    <div
      id={id}
      role="button"
      className={cn(
        triggerButtonVariants({ size, isFocus, fullWidth, invalid: isInvalid }),
        className,
      )}
      onClick={onClick}
    >
      <div className="flex h-full grow flex-col items-start justify-center overflow-hidden">
        {label && (
          <div
            className={cn(
              labelVariants({
                size,
                hasValue,
                fullWidth,
              }),
            )}
          >
            {label}
          </div>
        )}

        {placeholder && !value && (
          <div className={cn(valueVariants({ size }), "text-gray-300")}>
            {placeholder}
          </div>
        )}
        {value && <div className={cn(valueVariants({ size }))}>{value}</div>}
      </div>
      {leftIcon && (
        <div className={cn(iconVariants({ size, iconHiddenOnMobile }))}>
          {leftIcon}
        </div>
      )}
      {rightIcon && (
        <div className="order-last ml-2 flex h-full w-5 items-center text-gray-500">
          {rightIcon}
        </div>
      )}
    </div>
  );
};

export default TriggerButton;