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

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

interface PromptModalProps {
  title: string;
  value?: string;
  confirmButton?: string;
  dismissButton?: string;
  onChange?: React.ChangeEventHandler<HTMLInputElement>;
  onConfirm?: (state: string) => void;
  onDismiss?: () => void;
  placeholder?: string;
  disabled?: boolean;
}

export const PromptModal = ({
  title,
  value,
  confirmButton = 'OK',
  dismissButton = 'Cancel',
  onChange,
  onConfirm,
  onDismiss,
  placeholder,
  disabled,
}: PromptModalProps) => {
  const [state, setState] = useState(value || '');
  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (ev) => {
    setState(ev.target.value);
    call(onChange, ev);
  };

  const handleSubmit: React.MouseEventHandler<HTMLButtonElement> = (ev) => {
    call(onConfirm, state);
  };

  return (
    <ModalContainer title={title}>
      <Input
        value={state}
        onChange={handleChange}
        placeholder={placeholder}
        onFocus={(ev) => ev.target.select()}
        disabled={disabled}
        autoFocus
      />
      <Box display="flex" marginY={4} spacing={2}>
        <Button onClick={onDismiss} color="gray" block>
          {dismissButton}
        </Button>
        <Button
          onClick={handleSubmit}
          color="blue"
          block
          disabled={!state || disabled}
          autoFocus
        >
          {confirmButton}
        </Button>
      </Box>
    </ModalContainer>
  );
};