import React, { FC, useRef } from 'react';
import Modal from '../../blocks/Modal';
import Button from '../../blocks/Button';
import Textarea from '../../blocks/Textarea';

import css from './index.module.css';

export interface FeePenaltyModalProps {
  isOpen?: boolean;
  isLoading?: boolean;
  handleOnAccept: (reason) => void;
  handleOnDecline: () => void;
  error?: string;
  title?: string;
  warningText?: string;
  feeText?: string;
  reasonLabel?: string;
  acceptLabel?: string;
  declineLabel?: string;
}

const PenaltyFeeModal: FC<FeePenaltyModalProps> = ({
  isOpen,
  isLoading,
  handleOnAccept,
  handleOnDecline,
  title,
  warningText,
  feeText,
  error,
  reasonLabel,
  acceptLabel,
  declineLabel,
}) => {
  const inputEl = useRef(null);

  return (
    <Modal
      handleOnSubmit={(e): void => {
        e.preventDefault();
        handleOnAccept(inputEl?.current?.value);
      }}
      title={title}
      isOpen={isOpen}
      error={error}
      isLoading={isLoading}
      actions={
        <div className={css.penaltyFeeModal__actions}>
          <div className={css.penaltyFeeModal__action}>
            <Button handleClick={handleOnDecline} variant="secondary">
              {declineLabel}
            </Button>
          </div>
          <div className={css.penaltyFeeModal__action}>
            <Button type="submit">{acceptLabel}</Button>
          </div>
        </div>
      }
    >
      {feeText && <div className={css.penaltyFeeModal__feeText}>{feeText}</div>}

      <div className={css.penaltyFeeModal__textarea}>
        <Textarea
          inputRef={inputEl}
          label={reasonLabel}
          initialRows={5}
          required={true}
          style={'booking'}
          optional={false}
        />
      </div>

      <div>{warningText}</div>
    </Modal>
  );
};

export default PenaltyFeeModal;