'use client';

import { ToastProps } from '@chakra-ui/react';
import clsx from 'clsx';
import { observer } from 'mobx-react-lite';
import { useCallback, useState } from 'react';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { twMerge } from 'tailwind-merge';

import Button, {
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import Link from '@/components/link/Link';
import { CloseIcon } from '@/icons';

export type ToastV2Props = {
  title: string;
  description?: string;
  isClosable?: boolean;
  status?: 'info' | 'warning' | 'success' | 'error' | 'loading';
  linkText?: string;
  href?: string;
  actionText?: string;
  onActionClick?: () => void;
  className?: string;
  actionComponent?: React.ComponentType;
  imageComponent?: React.ComponentType;
  onCloseClick?: () => void; // Called when user clicks the X button
  closeButtonClassName?: string; // Custom className for the close (X) button
} & ToastProps;

export const ToastV2 = observer((props: ToastV2Props) => {
  const {
    title,
    description,
    linkText,
    href,
    actionText,
    onActionClick,
    isClosable = true,
    className,
    actionComponent,
    imageComponent,
    status = 'info',
    onCloseClick, // Custom handler for X button click
    closeButtonClassName, // Custom className for close button
  } = props;

  const { t } = useTranslation();

  const [isDismissed, setIsDismissed] = useState<boolean>(false);

  const handleClose = useCallback(() => {
    setIsDismissed(true);
    // Call custom close handler if provided (e.g., to disable future toasts)
    onCloseClick?.();
  }, [onCloseClick]);

  return isDismissed ? null : (
    <div
      className={twMerge(
        clsx(
          'relative mr-4 flex h-auto w-auto max-w-[450px] flex-row rounded-[20px] border-2 p-4 font-sans text-lg',
          'border-transparent bg-background-secondary text-foreground-primary',
          {
            'bg-accent-error text-accent-error-contrast': status === 'error',
            'bg-accent-success text-accent-success-contrast':
              status === 'success',
            'border-accent-yellow': status === 'warning',
          }
        ),
        className
      )}
    >
      {imageComponent ? React.createElement(imageComponent) : null}
      {isClosable ? (
        <Button
          variant={ButtonVariant.Inherit}
          size={ButtonSize.Mini}
          shape={ButtonShape.Pill}
          icon={CloseIcon}
          className={twMerge('absolute top-2 right-2', closeButtonClassName)}
          onClick={handleClose}
          aria-label={t('cta.dismiss')}
        />
      ) : null}
      <div className='flex flex-1 flex-col justify-center'>
        <h3 className='font-sans text-base font-medium'>{title}</h3>
        <span className='font-sans text-sm opacity-70'>{description}</span>
      </div>
      {actionComponent ? (
        <div className='flex h-full w-auto flex-row items-center justify-center px-8 py-3'>
          {React.createElement(actionComponent)}
        </div>
      ) : (
        <div className='flex h-full w-auto flex-row items-center justify-center px-8 py-2'>
          {linkText && href ? (
            <Link href={href}>
              <Button enableHoverState variant={ButtonVariant.Aura}>
                {linkText}
              </Button>
            </Link>
          ) : null}
          {actionText && onActionClick ? (
            <Button
              enableHoverState
              variant={ButtonVariant.Aura}
              size={ButtonSize.Small}
              onClick={onActionClick}
            >
              {actionText}
            </Button>
          ) : null}
        </div>
      )}
    </div>
  );
});