import React from 'react';
import { TermsNeedingAccept } from './termsNeedingAccept';
import { Modal } from 'app/shared/components/modal/modal';
import { useDispatch, useSelector } from 'react-redux';
import { selectTermsNeedingAccept, selectUserTermsToAccept } from 'app/modules/user/store/user.selectors';
import { userTermsAccept } from '../../user/store';

const getFooter = (clickHandler) => {
  return <div className="o-layout">
    <div className="c-terms-needing-accept-modal__accept o-layout__item-12 o-layout">
      <button className="c-button c-button--main c-button--filled u-margin-md-right--enormous" onClick={clickHandler}>
        I agree to Terms
      </button>
    </div>
  </div>;
};

const getHeader = () => {
  return <div className="u-align--left u-margin-right--big">
    <p className="c-terms-needing-accept-modal__title">
      Terms of Use for MS Pool partner website
    </p>
    <p className="c-terms-needing-accept-modal__info">
      To continue, please review and accept the Terms & Conditions.
    </p>
  </div>;
};

export const TermsNeedingAcceptModal = () => {
  const isOpen = useSelector(selectTermsNeedingAccept);
  const termsToAccept = useSelector(selectUserTermsToAccept);
  const dispatch = useDispatch();

  const handleTermsAgreement = () => {
    dispatch(userTermsAccept(termsToAccept?.version));
  };

  return <Modal
    extraClass={'c-terms-needing-accept-modal__content-container'}
    contentExtraClass={'c-terms-needing-accept-modal__content'}
    centered
    isOpened={isOpen}
    onOverlay={() => {}}
    footer={getFooter(handleTermsAgreement)}
    header={getHeader()}
    withGradient
    withMobile
  >
    <TermsNeedingAccept/>
  </Modal>;
};