import React from 'react';
import PropTypes from 'prop-types';

import { DEMAND_TAG_PAGE_CONFIRM_FREQUENCY_CAP_MODAL } from '../../constants';

import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from '@/mui/components';

import styles from './ChangeAdFeeModal.module.scss';

function ConfirmFrequencyCapModal(props) {
  const handleClose = () => {
    props.onClose();
  };

  const handleSave = () => {
    props.onSave();
    handleClose();
  };

  return (
    <Dialog
      open={props.modal.id === DEMAND_TAG_PAGE_CONFIRM_FREQUENCY_CAP_MODAL}
      onClose={handleClose}
      aria-labelledby="change-rev-share-modal"
    >
      <DialogTitle onClose={props.onClose}>Update Frequency Cap Settings?</DialogTitle>
      <DialogContent className={styles.Content}>
        <Typography variant="subtitle2" color="text.primary" fontWeight={400}>
          Removing or increasing the frequency cap may reduce fill rate and negatively impact inventory yield. Consult
          your AM before making changes if unsure.
        </Typography>

        <div className={styles.Field} />

        <Typography variant="subtitle2" color="text.primary" fontWeight={400}>
          Are you sure you want to continue?
        </Typography>
      </DialogContent>
      <DialogActions className={styles.Actions}>
        <Button size="small" variant="outlined" onClick={handleClose}>
          Cancel
        </Button>
        <Button size="small" variant="contained" color="primary" onClick={handleSave}>
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ConfirmFrequencyCapModal.propTypes = {
  modal: PropTypes.shape({
    id: PropTypes.string,
  }).isRequired,
  onClose: PropTypes.func.isRequired,
  onSave: PropTypes.func.isRequired,
};

export default ConfirmFrequencyCapModal;
