// Import Aphrodite
const {StyleSheet, css} = aphrodite;

// Import our variables from other files
// In this example, we'll just use static values.
const brandBlue = '#1a72a2'; // colors.js
const isMobile = '@media (max-width: 700px)';  // breakpoints.js

// Compose our Styles 
const styles = ( isOpen ) => StyleSheet.create({ 
  wrapper: { 
    padding: '12px 24px',
    width: '300px',
    height: '80px',
    background: '#eee',
    position: 'relative',
    fontFamily: 'sans-serif',
    [isMobile]: { 
      width: '100%',
      padding: '6px 12px',
    },
  },
  username : { 
    fontSize: '1.2em',
    display: 'flex',
    alignItems: 'center',
    color: brandBlue,
    ':before': { 
      content: "' '",
      display: 'inline-block',
      border: `solid 3px ${brandBlue}`,
      height: '24px',
      width: '24px',
      borderRadius: '100%',
      margin: '0 0.5em',
    },
    ':hover': { 
      cursor: 'pointer',
    }
  },
  menu : { 
    padding: '10px',
    position: 'absolute',
    background: '#fff',
    width: '80%',
    boxShadow: '0 1px 4px 0px #ccc',
    display: isOpen ? 'block' : 'none',
  },
  menuItem: { 
    borderBottom: 'solid 1px #ccc',
    ':last-of-type' : { 
       borderBottom: 'none',
    },
  },
});

// Compose our Component. Passing in `isOpen`. 
const UserMenu  = ({ isOpen }) => ( 
  <div className={css(styles().wrapper)} onClick={()=>toggleOpen()}>
    <p className={css(styles().username)}>
      Jon Andrew Davis (click me)
    </p>
    <div className={css(styles(isOpen).menu)}>
      <p className={css(styles().menuItem)}>Preferences</p>
      <p className={css(styles().menuItem)}>Help</p>
      <p className={css(styles().menuItem)}>Sign Out</p>
    </div>
 </div>
);

//////////////////////////////////
// Compose our simple react demo. 
//////////////////////////////////


// This var emulates a store.
// MobX, Redux, or anything else used to track state.
var isOpenStore = false;


// A dispatch-like function to update that store.
// Notice how the `isOpenStore` is a boolean value that is passed into the `isOpen` property. That can be used by the component.
// We need to call a re-render, since this such a basic example.
const toggleOpen = function(){ 
  isOpenStore = !isOpenStore;
  ReactDOM.render( 
    <UserMenu isOpen={isOpenStore} />, 
    document.getElementById("App")
  );
};

// On init. Render our App to an existing <div />.
ReactDOM.render( 
  <UserMenu isOpen={isOpenStore} />, 
  document.getElementById("App")
);