import * as React from 'react'

import Header from './Header'
import ActivityFeed from './ActivityFeed'
import Settings from './Settings'
import SettingsNotifications from './Settings/Notifications'
import SettingsDomains from './Settings/Domains'
import { PopupView } from '../interfaces/PopupView'
import PopupToast from './PopupToast'
interface PopupState {
  view: PopupView
}

class PopUp extends React.Component<{}, PopupState> {
  state = {
    view: PopupView.ActivityFeed,
  }

  handleOnSettingsClick = () => {
    this.setState({ view: PopupView.Settings })
  }

  handleCloseSettings = () => {
    this.setState({ view: PopupView.ActivityFeed })
  }

  handleManageNotifs = () => {
    this.setState({ view: PopupView.SettingsNotifications })
  }

  handleManageDomains = () => {
    this.setState({ view: PopupView.SettingsDomains })
  }

  renderView() {
    switch (this.state.view) {
      case PopupView.Settings:
        return (
          <Settings
            key="settings"
            handleManageNotifs={this.handleManageNotifs}
            handleManageDomains={this.handleManageDomains}
            handleCloseSettings={this.handleCloseSettings}
          />
        )
      case PopupView.SettingsNotifications:
        return (
          <SettingsNotifications
            key="settingsNotifications"
            handleOnSettingsClick={this.handleOnSettingsClick}
            handleCloseSettings={this.handleCloseSettings}
          />
        )
      case PopupView.SettingsDomains:
        return (
          <SettingsDomains
            key="settingsNotifications"
            handleOnSettingsClick={this.handleOnSettingsClick}
            handleCloseSettings={this.handleCloseSettings}
          />
        )
      case PopupView.ActivityFeed:
        return [
          <Header
            key="header"
            handleOnSettingsClick={this.handleOnSettingsClick}
            view={this.state.view}
          />,
          <ActivityFeed key="feed" handleManageDomainClick={this.handleManageDomains}/>,
        ]
    }
  }

  render(): JSX.Element {
    return <div className="popup">
    <PopupToast /> 
    {this.renderView()}
    </div>
  }
}
export default PopUp