import { useCallback, useState } from 'react';

import type {
  DialogBoxProps,
  DialogBoxRenderContent,
} from '~/src/components/DialogBox';
import type { ReactNode } from 'react';

import Box from '~/src/components/Box';
import CardAction from '~/src/components/Card/CardAction';
import DialogBox from '~/src/components/DialogBox';
import { DialogBoxHeader } from '~/src/components/DialogBox/DialogBoxHeader';
import Text from '~/src/components/Text';

export interface ConfirmDialogProps
  extends Omit<DialogBoxProps, 'onClose' | 'renderContent'> {
  onConfirm?: () => void;
  onClose: (params?: { confirmed: boolean }) => void;
  content: ReactNode;
  titleText?: string;
  actionText?: string;
  cancelText?: string;
  isDanger?: boolean;
}

const ConfirmDialog = ({
  titleText,
  actionText = 'Confirm',
  cancelText = 'Cancel',
  content: messageText,
  onConfirm,
  onClose,
  isDanger = true,
  ...dialogBoxProps
}: ConfirmDialogProps) => {
  const [isLoading, setIsLoading] = useState(false);

  const renderHeader = useCallback(
    () => <DialogBoxHeader title={titleText} />,
    [titleText]
  );

  return (
    <DialogBox
      {...dialogBoxProps}
      maxWidth="35rem"
      onClose={onClose}
      testId="confirmDialog"
      renderHeader={titleText ? renderHeader : undefined}
      renderContent={useCallback<DialogBoxRenderContent<typeof onClose>>(
        ({ close }) => {
          return (
            <Box>
              <Text
                centered
                padding={`${titleText ? 0 : '3rem'} 2.4rem 3rem`}
                size="1.5rem"
                isParagraph
                lineHeight={1.35}
                color="#ddd"
                opacity={isLoading ? 0.8 : 1}
              >
                {messageText}
              </Text>
              <Box flexRow>
                <CardAction
                  width="50%"
                  text={cancelText}
                  background="#111"
                  borderColor="#222"
                  height="5rem"
                  testId="cancel"
                  isSecondary
                  isDisabled={isLoading}
                  withRightBorder
                  onClick={() => {
                    close({ confirmed: false });
                  }}
                />
                <CardAction
                  width="50%"
                  text={actionText}
                  background="#111"
                  borderColor="#222"
                  height="5rem"
                  testId="confirm"
                  isLoading={isLoading}
                  isDanger={isDanger}
                  onClick={async () => {
                    try {
                      setIsLoading(true);
                      if (onConfirm) await onConfirm();
                    } finally {
                      setIsLoading(false);
                      close({ confirmed: true });
                    }
                  }}
                />
              </Box>
            </Box>
          );
        },
        [messageText, isLoading]
      )}
    />
  );
};

export default ConfirmDialog;