function HideButton(props) {
    if(props.checked === "true") {
      return (
        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
      );
    } else {
      return (
        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
      );
    }
}

export default HideButton;

function udpateDisplayedItems(e) {
  localStorage.setItem('contenttype', e.target.checked);
  if (e.target.checked) {
    localStorage.setItem('content-display', 'none');
  } else {
    localStorage.setItem('content-display', 'block');
  }
  setDisplayedItems();
}
function setDisplayedItems() {
  if(localStorage.getItem("contenttype") === null) {
      localStorage.setItem('contenttype', false);
      localStorage.setItem('content-display', "block");
  }
  setValueFromLocalStorage('contenttype');
  setValueFromLocalStorage('content-display');
}

export const setValueFromLocalStorage = property => {
  let value = localStorage.getItem(property);
  setValue(property, value);
};
export const setValue = (property, value) => {
  if (value) {
      document.documentElement.style.setProperty(`--${property}`, value);

      const input = document.querySelector(`#${property}`);
      if (input) {
          value = value.replace('px', '');
          input.value = value;
      }
  }
};