import React, {Component} from "react";
import {connect} from "react-redux";
import {withRouter} from "react-router-dom";
import Cookies from "js-cookie";
import classnames from "classnames";

//strings
import strings from "../constants/localization";
import {CHAT_SETTINGS} from "../constants/cookieKeys";
import {CHAT_SETTING_KEYS} from "../constants/chatSettings";

//actions
import {chatSettings} from "../actions/chatActions";

//components
import AsideHeadChatSettingsCall from "./AsideHeadChatSettingsCall";
import AsideHeadChatSettingsNotifications from "./AsideHeadChatSettingsNotifications";
import AsideHeadChatSettingsAboutTalk from "./AsideHeadChatSettingsAboutTalk";
import SettingsList, {buildMenuItem} from "./_component/SettingsList";
import Gap from "../../../Talk-ui-kit/src/gap";
import Scroller from "../../../Talk-ui-kit/src/scroller";
import Container from "../../../Talk-ui-kit/src/container";
import {Text} from "../../../Talk-ui-kit/src/typography";
import {
  MdArrowForward, MdOutlinePhone, MdOutlineNotificationsNone, MdOutlineArticle
} from "react-icons/md";

//styling
import style from "../../styles/app/AsideHeadChatSettings.scss";

//statics
const CommonIconProps = {size: style.iconSizeMd, color: style.colorAccent};

@connect(store => {
  return {
    chatSettings: store.chatSettings
  };
})
class AsideHeadChatSettings extends Component {

  static defaultProps = {
    menuItems: [
      {
        ...buildMenuItem(CHAT_SETTING_KEYS.CALL.MAIN, strings.chatSettings[CHAT_SETTING_KEYS.CALL.MAIN].MAIN, null, null,
          <MdOutlinePhone {...CommonIconProps}/>),
        Render: props => <AsideHeadChatSettingsCall {...props}/>
      },
      {
        ...buildMenuItem(CHAT_SETTING_KEYS.NOTIFICATIONS.MAIN, strings.chatSettings[CHAT_SETTING_KEYS.NOTIFICATIONS.MAIN].MAIN, null, null,
          <MdOutlineNotificationsNone {...CommonIconProps}/>),
        Render: props => <AsideHeadChatSettingsNotifications {...props}/>
      },
      {
        ...buildMenuItem(CHAT_SETTING_KEYS.ABOUT_TALK.MAIN, strings.chatSettings[CHAT_SETTING_KEYS.ABOUT_TALK.MAIN].MAIN, null, null,
          <MdOutlineArticle {...CommonIconProps}/>),
        Render: props => <AsideHeadChatSettingsAboutTalk {...props}/>
      }
    ]
  };


  constructor(props) {
    super(props);
    this.state = {
      selectedMenu: null
    };
    this.onBackClick = this.onBackClick.bind(this);
    this.dispatchSettings = this.dispatchSettings.bind(this);
    this.onMenuSelect = this.onMenuSelect.bind(this);
  }

  onMenuSelect(type) {
    this.setState({
      selectedMenu: this.props.menuItems.find(e => e.type === type)
    })
  }

  onBackClick() {
    const {selectedMenu} = this.state
    if (selectedMenu) {
      return this.setState({
        selectedMenu: null
      })
    }
    this.props.onClose();
  }

  dispatchSettings(payload) {
    Cookies.set(CHAT_SETTINGS, JSON.stringify(payload), {expires: 9999999999});
    this.props.dispatch(chatSettings(payload));
  }

  render() {
    const {menuItems, showing, chatSettings} = this.props;
    const {selectedMenu} = this.state;
    const classNames = classnames({
      [style.AsideHeadChatSettings]: true,
      [style["AsideHeadChatSettings--showing"]]: showing
    });
    return <Container className={classNames}>
      <Gap y={30} x={20} className={style.AsideHeadChatSettings__Head}>
        <Gap x={10} onClick={this.onBackClick}>
          <MdArrowForward size={style.iconSizeMd} color={style.colorWhite} style={{cursor: "pointer"}}/>
        </Gap>
        <Text invert bold size="lg">{strings.settings}
          <Text inline size="sm" invert>{selectedMenu?.name ? ` ( ${selectedMenu.name} )` : ""}</Text>
        </Text>
      </Gap>
      <Scroller className={style.AsideHeadChatSettings__Scroller}>
        {selectedMenu ?
          <selectedMenu.Render chatSettings={chatSettings} dispatchSettings={this.dispatchSettings}
                               onMenuSelect={this.onMenuSelect}/>
          :
          <SettingsList setSettings={this.onMenuSelect} menuItems={menuItems}/>
        }
      </Scroller>
    </Container>
  }
}

export default withRouter(AsideHeadChatSettings);