const { __ } = wp.i18n;
const { useState } = wp.element;
const { Modal, Button } = wp.components;

export default ({ children, disabled }) => {
  const [dialog, setDialog] = useState(false);

  if (!disabled) {
    return <div>{children}</div>;
  }

  return (
    <div>
      <div
        className="presto-options__disabled-overlay"
        onClick={(e) => {
          setDialog(true);
          e.preventDefault();
          return false;
        }}
      >
        <div>{children}</div>
      </div>
      {!!dialog && (
        <Modal title={disabled?.title} onRequestClose={() => setDialog(false)}>
          <h2>{disabled?.heading}</h2>
          <p>{disabled?.message}</p>
          <Button href={disabled?.link} target="_blank" isPrimary>
            {__("Learn More", "presto-player")}
          </Button>
        </Modal>
      )}
    </div>
  );
};