const m = require('mithril');
const Data = require('network/network_data');
const compose = require('mail/mail_compose');
const {
  State,
  loadOwnProfile,
  loadGxsIdentities,
  fetchIdDetails,
  startDirectChat,
  getOnlineSslId,
  preloadNetworkChatHistory,
  loadDirectChatMessages,
  markDirectChatRead,
} = require('network/network_state');
const { OwnProfileCard, FriendsList } = require('network/network_friends_list');
const DetailsTab = require('network/network_details_tab');
const ChatTab = require('network/network_chat_tab');
const NetworkGraph = require('network/network_graph');

const NetworkLayout = () => {
  return {
    oninit: () => {
      // Keep the active-chat list current even when no conversation is open.
      loadDirectChatMessages();
      Data.refreshGpgDetails().then(() => {
        preloadNetworkChatHistory();
        m.redraw();
      });
      loadOwnProfile();
      loadGxsIdentities();
    },
    view: () => {
      const selectedFriend = State.selectedFriendGpgId
        ? Data.gpgDetails[State.selectedFriendGpgId]
        : null;

      const selectedGxsId = State.selectedFriendGpgId
        ? State.gpgToGxsIdMap[State.selectedFriendGpgId.toLowerCase()]
        : null;

      if (State.selectedFriendGpgId && !selectedGxsId && State.gxsIdentities) {
        State.gxsIdentities.forEach((gxsId) => fetchIdDetails(gxsId));
      }

      return m('.network-container' + (State.mobilePane === 'detail' ? '.mobile-detail-open' : ''), [
        m('.network-left-pane', [m(OwnProfileCard), m(FriendsList)]),
        m('.network-right-pane', [
          m('.mobile-pane-header', [
            m('button.mobile-back-button', {
              type: 'button',
              onclick: () => { State.mobilePane = 'list'; },
            }, [m('i.fas.fa-chevron-left'), ' Network']),
            m('strong', State.activeTab === 'graph' ? 'Network Graph' : (selectedFriend ? selectedFriend.name : 'Friend')),
          ]),
          m('.network-tabs', [
                  m(
                    'button.tab-btn' + (State.activeTab === 'details' ? '.active' : ''),
                    {
                      onclick: () => {
                        State.activeTab = 'details';
                        State.mobilePane = 'detail';
                      },
                    },
                    'Details View'
                  ),
                  m(
                    'button.tab-btn' + (State.activeTab === 'chat' ? '.active' : ''),
                    {
                      onclick: () => {
                        State.activeTab = 'chat';
                        State.mobilePane = 'detail';
                        markDirectChatRead(State.selectedFriendGpgId);
                        const sslId = getOnlineSslId(State.selectedFriendGpgId);
                        if (sslId && !State.currentChatPeerId) {
                          startDirectChat(sslId);
                        }
                      },
                    },
                    'Chat Conversation'
                  ),
                  m(
                    'button.tab-btn' + (State.activeTab === 'graph' ? '.active' : ''),
                    { onclick: () => { State.activeTab = 'graph'; State.mobilePane = 'detail'; } },
                    [m('i.fas.fa-project-diagram'), ' Network Graph']
                  ),
          ]),
          State.activeTab === 'graph'
            ? m('.network-tab-content.network-graph-tab', m(NetworkGraph))
            : selectedFriend
              ? m('.network-tab-content' + (State.activeTab === 'chat' ? '.network-chat-tab-content' : ''), [
                  State.activeTab === 'details' ? m(DetailsTab) : m(ChatTab),
                ])
              : m('.network-pane-placeholder', [
                m('i.fas.fa-network-wired'),
                m(
                  'p',
                  'Select a friend for details or chat, or open the Network Graph tab.'
                ),
              ]),
        ]),
        State.showMailCompose &&
          State.selectedFriendGpgId &&
          m(
            '.composePopupOverlay#mailComposerPopup',
            { style: { display: 'block' } },
            m(
              '.composePopup',
              m(compose, {
                msgType: 'compose',
                toId: selectedGxsId || State.selectedFriendGpgId,
                friendName: selectedFriend ? selectedFriend.name : 'Unknown Friend',
                isDirectMail: true,
                setShowCompose: (val) => {
                  State.showMailCompose = val;
                },
              }),
              m(
                'button.red.close-btn',
                {
                  onclick: () => {
                    State.showMailCompose = false;
                  },
                },
                m('i.fas.fa-times')
              )
            )
          ),
      ]);
    },
  };
};

module.exports = NetworkLayout;