/* @flow */

import React from 'react';
import Flux from '../../lib/flux';
import i18n from '../../i18n';

import SettingsView from '../common/SettingsView';
import ConfirmModal from '../ConfirmModal';
import UserSettingsAccount from './UserSettingsAccount';
import UserSettingsExperiments from './UserSettingsExperiments';
import UserSettingsTextImages from './UserSettingsTextImages';
import UserSettingsConnections from './UserSettingsConnections';
import UserSettingsAppearance from './UserSettingsAppearance';
import UserSettingsKeybinds from './UserSettingsKeybinds';
import UserSettingsStreamerMode from './UserSettingsStreamerMode';
import UserSettingsAuthedApps from './UserSettingsAuthedApps';
import UserSettingsLocale from './UserSettingsLocale';
import UserSettingsGames from './UserSettingsGames';
import UserSettingsNotifications from './UserSettingsNotifications';
import UserSettingsVoice from './UserSettingsVoice';
import UserSettingsOverlay from './UserSettingsOverlay';
import UserSettingsPrivacySafety from './UserSettingsPrivacySafety';
import UserSettingsPremium from './UserSettingsPremium';
import SocialLinks from './SocialLinks';

import ModalActionCreators from '../../actions/ModalActionCreators';
import AuthenticationActionCreators from '../../actions/AuthenticationActionCreators';
import UserSettingsModalActionCreators from '../../actions/UserSettingsModalActionCreators';
import ChangeLogActionCreators from '../../actions/ChangeLogActionCreators';
import {popLayer} from '../../actions/LayerActionCreators';

import UserSettingsStore from '../../stores/UserSettingsStore';
import UserSettingsModalStore from '../../stores/UserSettingsModalStore';
import DeveloperExperimentStore from '../../stores/DeveloperExperimentStore';
import VideoCallExperimentStore from '../../stores/experiments/VideoCallExperimentStore';
import ExperimentStore from '../../stores/ExperimentStore';
import MediaEngineStore from '../../stores/MediaEngineStore';
import OverlayStore from '../../stores/OverlayStore';

import AppAnalyticsUtils from '../../utils/AppAnalyticsUtils';
import NativeUtils from '../../utils/NativeUtils';

import {SectionTypes} from '../common/StandardSidebarView';
import {UserSettingsSections, ExperimentTypes, AnalyticEvents} from '../../Constants';

type Section = {
  section: string,
  label?: string,
  className?: string,
  element?: ReactClass<any>,
  predicate?: Function,
  onClick?: Function,
};

function generateSections(videoSettings: boolean): Array<Section> {
  return [
    {
      section: SectionTypes.HEADER,
      label: i18n.Messages.USER_SETTINGS,
    },
    {
      section: UserSettingsSections.ACCOUNT,
      label: i18n.Messages.USER_SETTINGS_MY_ACCOUNT,
      element: UserSettingsAccount,
    },
    {
      section: UserSettingsSections.PRIVACY_AND_SAFETY,
      label: i18n.Messages.PRIVACY_AND_SAFETY,
      element: UserSettingsPrivacySafety,
    },
    {
      section: UserSettingsSections.AUTHORIZED_APPS,
      label: i18n.Messages.AUTHORIZED_APPS,
      element: UserSettingsAuthedApps,
    },
    {
      section: UserSettingsSections.CONNECTIONS,
      label: i18n.Messages.CONNECTIONS,
      element: UserSettingsConnections,
    },
    {
      section: SectionTypes.DIVIDER,
    },
    {
      section: UserSettingsSections.PREMIUM,
      label: i18n.Messages.PREMIUM_TITLE,
      element: UserSettingsPremium,
      className: 'brand',
    },
    {
      section: SectionTypes.DIVIDER,
    },
    {
      section: SectionTypes.HEADER,
      label: i18n.Messages.APP_SETTINGS,
    },
    {
      section: UserSettingsSections.VOICE,
      label: videoSettings ? i18n.Messages.VOICE_AND_VIDEO : i18n.Messages.VOICE,
      element: UserSettingsVoice,
      predicate() {
        return MediaEngineStore.isSupported();
      },
    },
    {
      section: UserSettingsSections.OVERLAY,
      label: i18n.Messages.OVERLAY,
      element: UserSettingsOverlay,
      predicate() {
        return OverlayStore.isSupported();
      },
    },
    {
      section: UserSettingsSections.NOTIFICATIONS,
      label: i18n.Messages.NOTIFICATIONS,
      element: UserSettingsNotifications,
    },
    {
      section: UserSettingsSections.KEYBINDS,
      label: i18n.Messages.KEYBINDS,
      element: UserSettingsKeybinds,
      predicate() {
        return NativeUtils.embedded || process.env.NODE_ENV === 'development';
      },
    },
    {
      section: UserSettingsSections.GAMES,
      label: i18n.Messages.GAMES,
      element: UserSettingsGames,
      predicate() {
        return NativeUtils.embedded;
      },
    },
    {
      section: UserSettingsSections.TEXT,
      label: i18n.Messages.TEXT_AND_IMAGES,
      element: UserSettingsTextImages,
    },
    {
      section: UserSettingsSections.APPEARANCE,
      label: i18n.Messages.APPEARANCE,
      element: UserSettingsAppearance,
    },
    {
      section: UserSettingsSections.STREAMER_MODE,
      label: i18n.Messages.STREAMER_MODE,
      element: UserSettingsStreamerMode,
    },
    {
      section: UserSettingsSections.LOCALE,
      label: i18n.Messages.LANGUAGE,
      element: UserSettingsLocale,
    },
    {
      section: SectionTypes.DIVIDER,
    },
    {
      section: 'changelog',
      onClick: () => ChangeLogActionCreators.showChangeLog(),
      label: i18n.Messages.CHANGE_LOG,
    },
    {
      section: UserSettingsSections.EXPERIMENTS,
      // NOTE: This is for internal dev only, no need to i18n
      label: 'Experiments',
      element: UserSettingsExperiments,
      predicate() {
        return DeveloperExperimentStore.isDeveloper();
      },
    },
    {
      section: SectionTypes.DIVIDER,
    },
    {
      section: 'logout',
      onClick() {
        ModalActionCreators.push(props => {
          return (
            <ConfirmModal
              header={i18n.Messages.LOGOUT}
              confirmText={i18n.Messages.LOGOUT}
              cancelText={i18n.Messages.CANCEL}
              onConfirm={() => AuthenticationActionCreators.logout()}
              {...props}>
              {i18n.Messages.USER_SETTINGS_CONFIRM_LOGOUT}
            </ConfirmModal>
          );
        });
      },
      label: i18n.Messages.LOGOUT,
      className: 'danger',
    },
    {
      section: SectionTypes.DIVIDER,
    },
    {
      section: SectionTypes.CUSTOM,
      element: SocialLinks,
    },
  ];
}

export function getUserSettingsSections(videoSettings: boolean) {
  return generateSections(videoSettings)
    .filter(
      ({section}) =>
        section !== SectionTypes.HEADER && section !== SectionTypes.CUSTOM && section !== SectionTypes.DIVIDER
    )
    .filter(section => section.predicate == null || section.predicate());
}

/* eslint-disable camelcase */
function trackPaneViewed(destination_pane, origin_pane = null) {
  AppAnalyticsUtils.trackWithMetadata(AnalyticEvents.SETTINGS_PANE_VIEWED, {
    settings_type: 'user',
    origin_pane,
    destination_pane,
  });
}
/* eslint-enable camelcase */

export default Flux.connectStores([UserSettingsModalStore, UserSettingsStore, VideoCallExperimentStore], () => {
  let videoSettings = false;
  const override = ExperimentStore.getOverrideExperimentDescriptor(VideoCallExperimentStore.getExperimentId());
  if ((override != null && override.type === ExperimentTypes.DEVELOPER) || VideoCallExperimentStore.hasVideoCall()) {
    videoSettings = true;
  }
  return {
    theme: UserSettingsStore.theme,
    section: UserSettingsModalStore.getSection(),
    videoSettings,
  };
})(
  class extends React.PureComponent {
    constructor(props) {
      super(props);
      (this: any).generateSections = this.generateSections.bind(this);
    }

    componentDidMount() {
      trackPaneViewed(this.props.section);
    }

    componentDidUpdate({section: prevSection}) {
      const {section} = this.props;
      if (section !== prevSection) {
        trackPaneViewed(section, prevSection);
      }
    }

    generateSections() {
      return generateSections(this.props.videoSettings);
    }

    render() {
      const {theme, section} = this.props;
      return (
        <SettingsView
          theme={theme}
          section={section}
          onSetSection={UserSettingsModalActionCreators.setSection}
          onClose={popLayer}
          sections={this.generateSections()}
        />
      );
    }
  }
);



// WEBPACK FOOTER //
// ./discord_app/components/user_settings/UserSettings.js