'use client'
import * as React from 'react'
import { Slot, Root, Slottable } from '@radix-ui/react-slot'
import { cva, type VariantProps } from 'class-variance-authority'
import { motion } from 'framer-motion'
import Link from 'next/link'
import { IconProps } from '../icons/icon'
import { cn } from '@/lib/utils/cn'
import { ButtonArrow } from '../icons/button-icon'

export type Variants =
  | 'primary'
  | 'secondary'
  | 'tertiary'
  | 'danger-primary'
  | 'danger-secondary'
  | 'icon-only'
  | 'icon-only-without-bg'
  | 'link-primary'
  | 'icon-only-white'
  | 'toggle'
  | 'ancor-link'

function Button({
  className,
  variant,
  asChild = false,
  children,
  disabled,
  icon,
  iconOnly = false,
  RightIcon,
  LeftIcon,
  isLeftIcon = false,
  isRightIcon = false,
  isArrowAnimated = true,
  motionProps,
  propsSlot,
  darkMode = false,
  sizes = '',
  selected,
  ...props
}: React.ComponentProps<'button'> & {
  variant?: Variants
  asChild?: boolean
  icon?: React.ReactElement<React.SVGProps<IconProps>>
  iconOnly?: boolean
  LeftIcon?: React.ReactElement<any>
  RightIcon?: React.ReactElement<any>
  isLeftIcon?: boolean
  isRightIcon?: boolean
  isArrowAnimated?: boolean
  motionProps?: React.ComponentProps<typeof motion.div>
  propsSlot?: any
  darkMode?: boolean
  sizes?: string
  selected?: boolean
}) {
  const Comp = propsSlot ? propsSlot : asChild ? Slot : motion.button

  const renderIcon = (variant: 'icon-only' | 'icon-only-without-bg' | 'icon-only-white') => {
    if (!icon) return null

    return React.cloneElement(icon, {
      className: cn(icon.props.className),
      width: icon?.props?.width || 24,
      height: icon?.props?.height || 24,
      onClick: icon?.props?.onClick || undefined,
    })
  }

  const renderSideIcon = (sideIcon: React.ReactElement<any>) => {
    if (!sideIcon) return null

    return React.cloneElement(sideIcon, {
      className: cn(sideIcon.props.className),
      width: sideIcon?.props?.width || 24,
      height: sideIcon?.props?.height || 24,
      onClick: sideIcon?.props?.onClick || undefined,
    })
  }

  return (
    <Comp
      data-slot="button"
      className={cn(
        'group cursor-pointer ui-button',
        {
          'flex justify-center items-center': variant === 'link-primary',
          'flex gap-x-2 items-center  transition-all ':
            variant === 'primary' || variant === 'secondary' || variant === 'tertiary',
          'bg-white text-base-black hover:bg-grey-50 active:ring-1 active:ring-[rgba(220,177,153,0.2)]':
            variant === 'primary',
          'bg-transparent-beige text-grey-50 hover:bg-[#FCFCFC59] active:ring-1 active:ring-[#FCFCFC59] active:bg-transparent-beige':
            variant === 'secondary',
          'bg-transparent text-grey-50 hover:bg-base-white/20 active:ring-1 active:ring-base-white/35':
            variant === 'tertiary',
          'bg-func-red-main text-base-white hover:bg-func-red-light active:bg-func-red-main active:text-base-white hover:text-func-red-main active:ring-1 active:ring-base-white':
            variant === 'danger-primary',
          'bg-transparent text-func-red-main hover:bg-func-red-light hover:text-func-red-main active:bg-func-red-main active:text-base-white active:ring-1 active:ring-func-red-main':
            variant === 'danger-secondary',
          'bg-[#D6D0CA24] text-base-white hover:text-neutral-900 hover:bg-beige-50 active:bg-[#D6D0CA24] active:text-base-white active:ring-1 active:ring-beige-100':
            variant === 'icon-only',
          'bg-base-white text-grey-600 hover:bg-grey-50 active:ring-1 active:ring-beige-300':
            variant === 'icon-only-white',
          'bg-transparent  text-grey-600 hover:bg-[#FCFCFC33] active:ring-[0.5px] active:ring-grey-200 active:shadow-dark-2px':
            variant === 'icon-only-without-bg',
          'bg-transparent rounded-[0px] border-b border-transparent text-base-white hover:text-beige-300 active:text-beige-50 active:border-beige-50':
            variant === 'link-primary',
          // toggle
          'text-grey-200  button-small-regular h-9 rounded-[8px] !px-4 flex-center':
            variant === 'toggle',
          'bg-[#FCFCFC33] text-base-white': variant === 'toggle' && selected,
          'hover:text-base-white': variant === 'toggle' && !selected,
          // toggle
          // ancor
          'text-grey-200  transition-all b2-regular h-12 rounded-[4px] !px-4 flex items-center':
            variant === 'ancor-link',
          'text-grey-50 bg-base-white/20': variant === 'ancor-link' && selected,
          'hover:text-grey-100 hover:bg-base-white/8': variant === 'ancor-link' && !selected,
          // ancor
        },
        disabled &&
          'pointer-events-none bg-grey-300 text-grey-600 ',
        sizes || (iconOnly ? 'icon-btn-lg' : 'btn-lg'),
        className,
      )}
      disabled={disabled}
      {...motionProps}
      {...props}
    >
      {!iconOnly &&
        (variant === 'secondary' || variant === 'primary' || variant === 'tertiary') &&
        (LeftIcon ? (
          <div className="flex-shrink-0 size-4 flex items-center justify-center">
            {renderSideIcon(LeftIcon)}
          </div>
        ) : (
          isLeftIcon && (
            <div className="flex-shrink-0 size-4 flex items-center justify-center">
              <ButtonArrow className="rotate-180" width={8} height={12} />
            </div>
          )
        ))}
      {iconOnly &&
      (variant === 'icon-only' ||
        variant === 'icon-only-without-bg' ||
        variant === 'icon-only-white') ? (
        <>
          <div className="size-6 flex items-center justify-center"> {renderIcon(variant)}</div>
        </>
      ) : (
        <Slottable>{children}</Slottable>
      )}
      {!iconOnly &&
      (variant === 'secondary' || variant === 'primary' || variant === 'tertiary') &&
      isRightIcon &&
      !RightIcon ? (
        <div className="flex-shrink-0 size-4 flex items-center justify-center">
          <ButtonArrow className=" " width={8} height={12} />
        </div>
      ) : RightIcon ? (
        <div className="flex-shrink-0 size-4 flex items-center justify-center">
          {renderSideIcon(RightIcon as any)}
        </div>
      ) : null}
    </Comp>
  )
}

export const MotionButton = motion(Button)
export const MotionLink = motion(Link)

export { Button }
