import { forwardRef, type MouseEvent } from 'react'
import styled from 'styled-components'
import PrimitiveButton, {
    type ButtonProps as PrimitiveButtonProps,
} from '../Primitives/PrimitiveButton/PrimitiveButton'
import Block from '../Primitives/Block/Block'
import Text from '../Text/Text'
import type { ButtonProps } from './types'
import { ButtonSize, ButtonState, ButtonSubType, ButtonType } from './types'
import type { ButtonTokensType } from './button.tokens'
import { LoaderCircle } from 'lucide-react'
import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
import { FOUNDATION_THEME } from '../../tokens'
const StyledButtonText = styled.span`
    display: flex;
    align-items: center;
    justify-content: center;
    gap: ${FOUNDATION_THEME.unit[6]};
    button:active & {
        transform: translateY(${FOUNDATION_THEME.unit[1]});
    }
`
const VisuallyHidden = styled.span`
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
`
export type ButtonBaseProps = Omit<
    ButtonProps,
    'showSkeleton' | 'skeletonVariant'
> & {
    isSkeleton?: boolean
    tokens?: ButtonTokensType
}
const formatLineHeight = (
    value?: number | string | null
): string | undefined => {
    if (value === undefined || value === null) return undefined
    return typeof value === 'number' ? `${value}px` : value
}
const ButtonBase = forwardRef<HTMLButtonElement, ButtonBaseProps>(
    (props, ref) => {
        const {
            buttonType = ButtonType.PRIMARY,
            size = ButtonSize.SMALL,
            subType = ButtonSubType.DEFAULT,
            text,
            leadingIcon,
            trailingIcon,
            disabled,
            onClick,
            loading,
            buttonGroupPosition,
            fullWidth,
            width,
            justifyContent = 'center',
            state = ButtonState.DEFAULT,
            isSkeleton = false,
            tokens,
            ...htmlProps
        } = props
        const defaultButtonTokens =
            useResponsiveTokens<ButtonTokensType>('BUTTON')
        const buttonTokens = tokens ?? defaultButtonTokens
        const getBorderRadius = () => {
            const variantBorderRadius =
                buttonTokens.borderRadius[size][buttonType][subType].default
            if (buttonGroupPosition === undefined) return variantBorderRadius
            if (buttonGroupPosition === 'left') {
                return `${variantBorderRadius} 0 0 ${variantBorderRadius}`
            } else if (buttonGroupPosition === 'right') {
                return `0 ${variantBorderRadius} ${variantBorderRadius} 0`
            }
            return `0px 0px 0px 0px`
        }
        const isLoading = loading && !isSkeleton
        const isDisabled = isSkeleton ? true : disabled
        const paddingTokens = buttonTokens.padding[size][buttonType][subType]
        const lineHeight = formatLineHeight(
            FOUNDATION_THEME.font.size.body.md.lineHeight
        )
        const buttonStatus = isLoading
            ? 'loading'
            : isDisabled
              ? 'disabled'
              : 'enabled'
        const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
            if (isSkeleton || isDisabled || isLoading) return
            onClick?.(event)
        }
        const isInButtonGroup = buttonGroupPosition !== undefined
        const buttonHeight =
            subType === ButtonSubType.INLINE
                ? 'fit-content'
                : isInButtonGroup
                  ? undefined
                  : 'fit-content'
        const iconMaxHeight =
            subType === ButtonSubType.INLINE
                ? '100%'
                : buttonTokens.slotMaxHeight[size]
        const buttonProps: Partial<
            Pick<
                PrimitiveButtonProps,
                | 'display'
                | 'alignItems'
                | 'justifyContent'
                | 'width'
                | 'height'
                | 'gap'
            >
        > & {
            ref?: React.Ref<HTMLButtonElement>
            onClick?: (event: MouseEvent<HTMLButtonElement>) => void
        } = {
            ref,
            onClick: handleClick,
            display: 'flex',
            alignItems: 'center',
            justifyContent,
            width: fullWidth ? '100%' : (width ?? 'fit-content'),
            gap: buttonTokens.gap,
        }
        if (buttonHeight !== undefined) {
            buttonProps.height = buttonHeight
        }
        return (
            <PrimitiveButton
                {...buttonProps}
                background={
                    isSkeleton
                        ? 'transparent'
                        : buttonTokens.backgroundColor[buttonType][subType]
                              .default
                }
                disabled={isDisabled}
                tabIndex={
                    isDisabled
                        ? -1
                        : htmlProps.tabIndex !== undefined
                          ? Math.max(-1, Math.min(0, htmlProps.tabIndex))
                          : 0
                }
                color={
                    isSkeleton
                        ? 'transparent'
                        : buttonTokens.text.color[buttonType][subType].default
                }
                borderRadius={getBorderRadius()}
                border={
                    isSkeleton
                        ? 'transparent'
                        : buttonTokens.border[buttonType][subType].default
                }
                outline={
                    isSkeleton
                        ? 'transparent'
                        : buttonTokens.outline[buttonType][subType].default
                }
                transition="transform 0.15s ease-in-out"
                aria-busy={isLoading || isSkeleton ? 'true' : undefined}
                aria-label={
                    isSkeleton && text && !htmlProps['aria-label']
                        ? text
                        : htmlProps['aria-label']
                          ? htmlProps['aria-label']
                          : undefined
                }
                _active={
                    isSkeleton || isDisabled
                        ? undefined
                        : {
                              background:
                                  buttonTokens.backgroundColor[buttonType][
                                      subType
                                  ].hover,
                              border: buttonTokens.border[buttonType][subType]
                                  .active,
                              boxShadow:
                                  buttonTokens.shadow[buttonType][subType]
                                      .active,
                          }
                }
                _hover={
                    isSkeleton
                        ? undefined
                        : {
                              background:
                                  buttonTokens.backgroundColor[buttonType][
                                      subType
                                  ].hover,
                              color: buttonTokens.text.color[buttonType][
                                  subType
                              ].hover,
                              border: buttonTokens.border[buttonType][subType]
                                  .hover,
                          }
                }
                _focusVisible={
                    isSkeleton
                        ? undefined
                        : {
                              border: buttonTokens.border[buttonType][subType]
                                  .default,
                              outline:
                                  buttonTokens.outline[buttonType][subType]
                                      .active,
                              //   outlineOffset: FOUNDATION_THEME.unit[2],
                          }
                }
                _disabled={
                    isSkeleton
                        ? {
                              background: 'transparent',
                              border: 'transparent',
                              cursor: 'default',
                          }
                        : {
                              background:
                                  buttonTokens.backgroundColor[buttonType][
                                      subType
                                  ].disabled,
                              border: buttonTokens.border[buttonType][subType]
                                  .disabled,
                              cursor: 'not-allowed',
                          }
                }
                paddingX={paddingTokens.x}
                paddingY={paddingTokens.y}
                data-button={text}
                data-status={buttonStatus}
                {...htmlProps}
            >
                {isLoading ? (
                    <>
                        <LoaderCircle
                            size={16}
                            color={
                                buttonTokens.text.color[buttonType][subType]
                                    .default
                            }
                            data-status="loading"
                            aria-hidden="true"
                            style={{
                                animation: 'spin 1s linear infinite',
                            }}
                        />
                        <VisuallyHidden aria-live="polite">
                            Loading, please wait
                        </VisuallyHidden>
                    </>
                ) : (
                    <StyledButtonText>
                        {leadingIcon && (
                            <Block
                                as="span"
                                contentCentered
                                data-element="leading-icon"
                                aria-hidden={text ? 'true' : undefined}
                                style={{
                                    opacity: isSkeleton ? 0 : 1,
                                    maxHeight: iconMaxHeight,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexShrink: 0,
                                    color: buttonTokens.text.color[buttonType][
                                        subType
                                    ][disabled ? 'disabled' : 'default'],
                                }}
                            >
                                {leadingIcon}
                            </Block>
                        )}
                        {text && (
                            <Text
                                fontSize={buttonTokens.text.fontSize[size]}
                                fontWeight={buttonTokens.text.fontWeight[size]}
                                as="span"
                                color={
                                    isSkeleton
                                        ? 'transparent'
                                        : buttonTokens.text.color[buttonType][
                                              subType
                                          ][isDisabled ? 'disabled' : state]
                                }
                                aria-hidden={isSkeleton ? true : undefined}
                                lineHeight={lineHeight}
                                textAlign="center"
                                data-id={text}
                            >
                                {text}
                            </Text>
                        )}
                        {trailingIcon && (
                            <Block
                                as="span"
                                contentCentered
                                data-element="trailing-icon"
                                aria-hidden={text ? 'true' : undefined}
                                style={{
                                    opacity: isSkeleton ? 0 : 1,
                                    maxHeight: iconMaxHeight,
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexShrink: 0,
                                    color: buttonTokens.text.color[buttonType][
                                        subType
                                    ][disabled ? 'disabled' : 'default'],
                                }}
                            >
                                {trailingIcon}
                            </Block>
                        )}
                    </StyledButtonText>
                )}
            </PrimitiveButton>
        )
    }
)
ButtonBase.displayName = 'ButtonBase'
export default ButtonBase