import React, { useState, useContext } from 'react';
import PropTypes from 'prop-types';
import { Context } from 'gatsby-core-theme/src/context/MainProvider';
import { translate } from 'gatsby-core-theme/src/helpers/getters';
import Button from 'gatsby-core-theme/src/components/atoms/button/button';
import styles from './newsletter-privacy&button.module.scss';

const PrivacyandSuccess = ({
  privacyText,
  btnText,
  buttonSize = 'm',
  buttonType = 'primary',
  onSubmit = null,
}) => {
  const { translations } = useContext(Context) || {};
  const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div className={styles?.display || ''}>
      {privacyText ? (
        <div className={styles.privacy}>
          <input type="checkbox" name="tnc" checked={isChecked} onChange={handleChange} />
          <p
            className={styles?.privacytext || ''}
            // eslint-disable-next-line react/no-danger
            dangerouslySetInnerHTML={{
              __html: translate(translations, 'newsletter_form_privacy_text', privacyText),
            }}
          />
        </div>
      ) : null}
      <Button
        isInternalLink={false}
        btnText={btnText}
        buttonSize={buttonSize}
        buttonType={buttonType}
        onClick={isChecked ? onSubmit : () => {}}
      />
    </div>
  );
};

PrivacyandSuccess.propTypes = {
  privacyText: PropTypes.string,
  btnText: PropTypes.string,
  onSubmit: PropTypes.func,
  buttonType: PropTypes.string,
  buttonSize: PropTypes.string,
};

export default PrivacyandSuccess;
