import { useCallback, useRef, useState } from 'react';

import type { FC } from 'react';
import type { ButtonProps } from '.';

import OutlineButton from './OutlineButton';
import PrimaryButton from './PrimaryButton';

export interface ConfirmButtonProps extends ButtonProps {
  buttonType?: 'primary' | 'outlined';
  confirmText?: string;
  enabled?: boolean;
}

const RESET_TIMEOUT = 2500;

const BUTTON_TYPE_TO_COMPONENT = {
  primary: PrimaryButton,
  outlined: OutlineButton,
};

export const ConfirmButton: FC<ConfirmButtonProps> = ({
  buttonType = 'outlined',
  confirmText = 'Click to confirm',
  onClick,
  enabled = true,
  text,
  ...buttonProps
}) => {
  const [isConfirming, setIsConfirming] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>(null);
  const ButtonComponent = BUTTON_TYPE_TO_COMPONENT[buttonType];

  return (
    <ButtonComponent
      {...buttonProps}
      withBackgroundHoverStyle
      text={isConfirming ? confirmText : text}
      withChevron={isConfirming ? true : buttonProps.withChevron}
      withActiveStyle={!enabled || isConfirming ? true : false}
      onClick={useCallback(
        (params) => {
          if (!onClick) return;

          if (!enabled) {
            onClick(params);
            return;
          }

          if (!isConfirming) {
            setIsConfirming(true);

            // reset the 'confirming' state after period of inactivity
            timeoutRef.current = setTimeout(() => {
              setIsConfirming(false);
            }, RESET_TIMEOUT);

            return;
          }

          setIsConfirming(false);
          onClick(params);
          clearTimeout(timeoutRef.current!);
        },
        [isConfirming, onClick, enabled]
      )}
    />
  );
};