import {createSelector} from 'reselect';

import Header from '../components/header';
import {closeTab, changeTab, maximize, unmaximize} from '../actions/header';
import {values} from '../utils/object';
import {connect} from '../utils/plugins';

const isMac = /Mac/.test(navigator.userAgent);

const getSessions = sessions => sessions.sessions;
const getActiveUid = sessions => sessions.activeUid;
const getActivityMarkers = (sessions, ui) => ui.activityMarkers;
const getTabs = createSelector(
  [getSessions, getActiveUid, getActivityMarkers],
  (sessions, activeUid, activityMarkers) => values(sessions).map(s => {
    return {
      uid: s.uid,
      title: s.title,
      isActive: s.uid === activeUid,
      hasActivity: activityMarkers[s.uid]
    };
  })
);

const HeaderContainer = connect(
  state => {
    return {
      // active is an index
      isMac,
      tabs: getTabs(state.sessions, state.ui),
      activeMarkers: state.ui.activityMarkers,
      borderColor: state.ui.borderColor,
      backgroundColor: state.ui.backgroundColor,
      maximized: state.ui.maximized
    };
  },
  dispatch => {
    return {
      onCloseTab: i => {
        dispatch(closeTab(i));
      },

      onChangeTab: i => {
        dispatch(changeTab(i));
      },

      maximize: () => {
        dispatch(maximize());
      },

      unmaximize: () => {
        dispatch(unmaximize());
      }
    };
  }
)(Header, 'Header');

export default HeaderContainer;