import React, {Fragment, useEffect, useState} from "react";
import OutsideClickHandler from "react-outside-click-handler";
import {useHistory} from "react-router-dom";
import {useDispatch} from "react-redux";
import {avatarNameGenerator, avatarUrlGenerator, routeChange} from "../utils/helpers";

//strings
import strings from "../constants/localization";
import {
  CONTACT_ADDING,
  CONTACT_LIST_SHOWING,
  CONTACT_MODAL_CREATE_CHANNEL_SHOWING,
  CONTACT_MODAL_CREATE_GROUP_SHOWING
} from "../constants/actionTypes";
import {
  ROUTE_ADD_CONTACT,
  ROUTE_CONTACTS,
  ROUTE_CREATE_CHANNEL,
  ROUTE_CREATE_GROUP
} from "../constants/routes";

//actions
import {
  contactAdding,
  contactListShowing,
  contactModalCreateGroupShowing
} from "../actions/contactActions";


//components
import AsideHeadChatSettings from "./AsideHeadChatSettings";
import SettingsList, {buildMenuItem} from "./_component/SettingsList";
import Container from "../../../Talk-ui-kit/src/container";
import {ButtonFloating, Button} from "../../../Talk-ui-kit/src/button"
import {Text} from "../../../Talk-ui-kit/src/typography";
import Avatar, {AvatarImage, AvatarName} from "../../../Talk-ui-kit/src/avatar";
import Gap from "../../../Talk-ui-kit/src/gap";
import {
  MdEdit,
  MdArrowBack,
  MdOutlineGroup,
  MdOutlineGroupAdd, MdOutlineGroups, MdRecordVoiceOver, MdOutlineSettingsApplications, MdOutlineExitToApp
} from "react-icons/md";

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

//statics

export default function ({chatRouterLess, chatSignOutHook, user, isMenuOpen, onCloseMenu}) {

  const [settings, setSettings] = useState(null);
  const [chatSettingsShow, setChatSettingsShow] = useState(false);
  const dispatch = useDispatch();
  const history = useHistory();

  useEffect(() => {
    if (!settings) {
      return
    }
    if (!chatSettingsShow) {
      setSettings(null)
    }
    onCloseMenu();
    switch (settings) {
      case CONTACT_ADDING:
        dispatch(contactAdding(true));
        routeChange(history, ROUTE_ADD_CONTACT, chatRouterLess);
        break;
      case CONTACT_LIST_SHOWING:
        dispatch(contactListShowing(true));
        routeChange(history, ROUTE_CONTACTS, chatRouterLess);
        break;
      case CONTACT_MODAL_CREATE_GROUP_SHOWING:
        dispatch(contactModalCreateGroupShowing(true));
        routeChange(history, ROUTE_CREATE_GROUP, chatRouterLess);
        break;
      case CONTACT_MODAL_CREATE_CHANNEL_SHOWING:
        dispatch(contactModalCreateGroupShowing(true, true));
        routeChange(history, ROUTE_CREATE_CHANNEL, chatRouterLess);
        break;
      case "CHAT_SETTINGS":
        setChatSettingsShow(true)
        break;
      default: {
        if (chatSignOutHook) {
          chatSignOutHook();
        }
      }
    }
  }, [settings, chatSettingsShow]);

  const menuItems = [
    buildMenuItem(CONTACT_ADDING, strings.addContact, null, MdOutlineGroupAdd, () => null),
    buildMenuItem(CONTACT_LIST_SHOWING, strings.contactList, null, MdOutlineGroup, () => null),
    buildMenuItem(CONTACT_MODAL_CREATE_GROUP_SHOWING, strings.createGroup(), null, MdOutlineGroups, () => null),
    buildMenuItem(CONTACT_MODAL_CREATE_CHANNEL_SHOWING, strings.createGroup(true), null, MdRecordVoiceOver, () => null),
    buildMenuItem("CHAT_SETTINGS", strings.settings, null, MdOutlineSettingsApplications, () => null),
    buildMenuItem("CHAT_SIGN_OUT", strings.signedOut, null, MdOutlineExitToApp, () => null),
  ];

  return isMenuOpen || chatSettingsShow ?
    <Fragment>
      <Container className={style.AsideHeadMenu__Overlay}/>
      <OutsideClickHandler onOutsideClick={onCloseMenu}>
        <Container className={style.AsideHeadMenu}>

          <AsideHeadChatSettings showing={chatSettingsShow} onClose={() => setChatSettingsShow(false)}/>
          {
            isMenuOpen && !chatSettingsShow &&
            <Container>
              <Container relative className={style.AsideHeadMenu__UserProfileContainer}>
                <Gap block x={20} y={20}>
                  <Container topLeft>
                    <Gap x={10} y={15} block>
                      <MdArrowBack size={style.iconSizeMd} color={style.colorBackgroundLight} style={{margin: "7px 0"}}
                                   onClick={onCloseMenu}/>
                    </Gap>
                  </Container>
                  <Avatar>
                    <AvatarImage src={avatarUrlGenerator(user.image, avatarUrlGenerator.SIZES.MEDIUM)}
                                 text={avatarNameGenerator(user.name).letter}
                                 textBg={avatarNameGenerator(user.name).color}
                                 customSize="50px"/>
                    <Container>
                      <AvatarName>
                        <Container>
                          <Text invert overflow="ellipsis">{user.name}</Text>
                        </Container>
                        <Container>
                          <Text size="xs" invert overflow="ellipsis">{user.cellphoneNumber}</Text>
                        </Container>
                      </AvatarName>
                    </Container>
                  </Avatar>
                  <Text target="_blank" link="https://panel.pod.ir/Users/Info">
                    <ButtonFloating size="sm" style={{
                      backgroundColor: style.colorAccentLight,
                      boxShadow: "none",
                      left: 5,
                      bottom: 5
                    }}>
                      <MdEdit size={style.iconSizeMd} style={{margin: "7px 5px"}}/>
                    </ButtonFloating>
                  </Text>
                </Gap>

              </Container>
              <SettingsList menuItems={menuItems} setSettings={setSettings}/>;
            </Container>
          }
        </Container>
      </OutsideClickHandler>
    </Fragment>
    : null
}