import React, { useContext } from 'react';
import { ModalContext } from '../context/ModalContext';
import { getCurrentResponse, setTargetText } from '../common/textUtil';

interface ModalFooterProps {
   close: () => void;
}

export const ModalFooter = (props: ModalFooterProps) => {
   const context = useContext(ModalContext)!;

   const apply = () => {
      setTargetText(
         context.target,
         getCurrentResponse(context.responses, context.showResponseIndex)?.answer ?? '',
      );
      props.close();
   };

   return (
      <div className="modal-footer">
         <div className="row">
            <div className="col-xs-5 col-xs-offset-7">
               <button
                  value="Provést"
                  className="btn btn-primary"
                  onClick={apply}
                  disabled={!context.responses.length}>
                  Použít
               </button>
               <button value="Zavřít" className="btn btn-secondary" onClick={props.close}>
                  Zavřít
               </button>
            </div>
         </div>
      </div>
   );
};