import {
  Alert as ChakraAlert,
  Box as ChakraBox,
  Button as ChakraButton,
  Center as ChakraCenter,
  HStack as ChakraHStack,
  Icon as ChakraIcon,
  Input as ChakraInput,
  Spinner as ChakraSpinner,
  Stack as ChakraStack,
  Text as ChakraText
} from "@chakra-ui/react";
import type { ReactNode } from "react";

type AnyProps = Record<string, any>;

function normalizeSpacingProps(props: AnyProps) {
  const next = { ...props };
  if (next.spacing !== undefined && next.gap === undefined) {
    next.gap = next.spacing;
  }
  delete next.spacing;
  return next;
}

function normalizeInteractiveProps(props: AnyProps) {
  const next = normalizeSpacingProps(props);
  if (next.isDisabled !== undefined && next.disabled === undefined) {
    next.disabled = next.isDisabled;
  }
  if (next.isLoading !== undefined && next.loading === undefined) {
    next.loading = next.isLoading;
  }
  delete next.isDisabled;
  delete next.isLoading;
  return next;
}

export const Center = ChakraCenter as any;
export const Icon = ChakraIcon as any;
export const Input = ChakraInput as any;
export const Spinner = ChakraSpinner as any;

export function Stack(props: AnyProps) {
  return <ChakraStack {...normalizeSpacingProps(props)} />;
}

export function HStack(props: AnyProps) {
  return <ChakraHStack {...normalizeSpacingProps(props)} />;
}

export function Text(props: AnyProps) {
  const next = { ...props };
  if (next.noOfLines !== undefined && next.lineClamp === undefined) {
    next.lineClamp = next.noOfLines;
  }
  delete next.noOfLines;
  return <ChakraText {...next} />;
}

export function Button(props: AnyProps) {
  const { leftIcon, rightIcon, children, ...rest } = normalizeInteractiveProps(props);
  return (
    <ChakraButton {...rest}>
      <ChakraHStack gap={2}>
        {leftIcon ?? null}
        <span>{children}</span>
        {rightIcon ?? null}
      </ChakraHStack>
    </ChakraButton>
  );
}

export function Alert({ children, status = "info", ...props }: AnyProps) {
  return (
    <ChakraAlert.Root status={status} {...props}>
      {children}
    </ChakraAlert.Root>
  );
}

export function AlertIcon() {
  return <ChakraAlert.Indicator />;
}

export function AlertDescription({ children, ...props }: { children: ReactNode } & AnyProps) {
  return <ChakraAlert.Description {...props}>{children}</ChakraAlert.Description>;
}

export function FormControl({ children, ...props }: AnyProps) {
  return <ChakraStack gap={2} {...normalizeSpacingProps(props)}>{children}</ChakraStack>;
}

export function FormLabel(props: AnyProps) {
  return <ChakraBox as="label" fontWeight="medium" {...props} />;
}