import { defineComponent, PropType, ref } from 'vue'
import { ToggleOpen, User } from  '@/types'
// import './AccountDropdown.scss'

export const AccountDropdown = defineComponent({
  props: {
    open: {
      type: Boolean,
      required: true,
    },
    toggleOpen: {
      type: Function as PropType<ToggleOpen>,
      required: true,
    },
    user: {
      type: Object as PropType<User>
    },
  },
  setup: props => {
    return () => (
      <div>
        {props.user ? (
          <div style={{ position: 'relative' }} class="account-dropdown">
            <img
              class="account-dropdown-icon"
              alt="account-dropdown"
              src={props.user.avatar}
              title={props.user.displayName}
              onClick={() => props.toggleOpen('account')}
            />
            {props.open && (
              <div class="account-dropdown-menu">
                <div class="account-dropdown-item" onClick={() => window.open('https://tagboard.com/logout', '_blank')}>
                  <span class="icon icon-exit"> </span>
                  Sign Out
                </div>
              </div>
            )}
          </div>
        ) : (
          <div class="sign-in-btn">
            <button>Sign In</button>
          </div>
        )}
      </div>
    )  
  }
})