import { useState } from 'react';
import { call } from 'utils/call';

import { Box, Button, Text } from 'components/common';
import { ModalContainer } from './ModalContainer';

interface ConfirmationModalProps {
  title?: string;
  message?: string;
  acceptButton?: string;
  dismissButton?: string;
  onAccept?: () => void;
  onDecline?: () => void;
  onDismiss?: () => void;
  accentColor?: 'blue' | 'red' | 'gray';
}

export const ConfirmationModal = ({
  title = 'Are you sure?',
  message,
  acceptButton = 'Yes',
  dismissButton = 'No',
  onAccept,
  onDecline,
  onDismiss,
  accentColor = 'blue',
}: ConfirmationModalProps) => {
  const [loading, setLoading] = useState(false);

  const handleConfirm: React.MouseEventHandler<HTMLButtonElement> = async (
    ev
  ) => {
    if (onAccept) {
      try {
        setLoading(true);
        await onAccept();
        call(onDismiss);
      } catch (error) {
        console.log(error);
        setLoading(false);
      }
    }
  };

  const handleDismiss: React.MouseEventHandler<HTMLButtonElement> = async (
    ev
  ) => {
    if (onDecline) {
      try {
        await onDecline();
      } catch (error) {
        console.log(error);
      }
    }
    call(onDismiss);
  };
  return (
    <ModalContainer title={title}>
      {message && <Text size="s">{message}</Text>}
      <Box display="flex" marginY={4} spacing={2}>
        <Button onClick={handleDismiss} color="gray" block>
          {dismissButton}
        </Button>
        <Button
          onClick={handleConfirm}
          color={accentColor}
          block
          autoFocus
          disabled={loading}
        >
          {acceptButton}
        </Button>
      </Box>
    </ModalContainer>
  );
};