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

//strings

//actions

//components
import ModalThreadInfoGroupMain from "./ModalThreadInfoGroupMain";
import ModalThreadInfoGroupSettingsAdminList from "./ModalThreadInfoGroupSettingsAdminList";
import ModalThreadInfoGroupSettingsAdminAdd from "./ModalThreadInfoGroupSettingsAdminAdd";
import ModalThreadInfoGroupSettings from "./ModalThreadInfoGroupSettings";
import {Heading} from "../../../Talk-ui-kit/src/typography";
import Modal from "../../../Talk-ui-kit/src/modal";
import ModalHeader from "../../../Talk-ui-kit/src/modal/ModalHeader";
import ModalBody from "../../../Talk-ui-kit/src/modal/ModalBody";
import ModalFooter from "../../../Talk-ui-kit/src/modal/ModalFooter";

//styling

//statics
const constants = {
  steps: {
    ON_GROUP_INFO: "GROUP_INFO",
    ON_SETTINGS: "ON_SETTINGS",
    ON_ADMIN_LIST: "ON_ADMIN_LIST",
    ON_ADMIN_ADD: "ON_ADMIN_ADD",
  }
};

//functions



@connect(null, null, null, {forwardRef: true})
class ModalThreadInfoGroup extends Component {

  constructor(props) {
    super(props);
    this.state = {
      step: constants.steps.ON_GROUP_INFO,
      HeaderComponent: () => "",
      FooterComponent: () => "",
    };
    this.setHeaderFooterComponent = this.setHeaderFooterComponent.bind(this);
    this.setScrollBottomThresholdCondition = this.setScrollBottomThresholdCondition.bind(this);
    this.setOnScrollBottomThreshold = this.setOnScrollBottomThreshold.bind(this);
    this.setFooterComponent = this.setFooterComponent.bind(this);
    this.setStep = this.setStep.bind(this);
  }

  onClose(dontGoBack) {
    this.props.onClose(dontGoBack);
  }

  setStep(step) {
    this.setState({
      step,
    })
  }

  setHeaderFooterComponent(HeaderComponent, FooterComponent) {
    this.setState({HeaderComponent, FooterComponent});
  }

  setScrollBottomThresholdCondition(scrollBottomThresholdCondition) {
    this.setState({scrollBottomThresholdCondition});
  }

  setOnScrollBottomThreshold(scrollBottomThreshold) {
    this.setState({scrollBottomThreshold});
  }

  setFooterComponent(FooterComponent) {
    this.setState({FooterComponent});
  }

  render() {
    const {thread, user, isShow, smallVersion, GapFragment, onClose, AvatarModalMediaFragment} = this.props;
    const {step, HeaderComponent, FooterComponent, scrollBottomThresholdCondition, scrollBottomThreshold} = this.state;
    const steps = constants.steps;
    const commonArguments = {
      onClose,
      user,
      GapFragment,
      thread,
      step,
      steps,
      setStep: this.setStep,
      setHeaderFooterComponent: this.setHeaderFooterComponent,
      setFooterComponent: this.setFooterComponent,
      setScrollBottomThresholdCondition: this.setScrollBottomThresholdCondition,
      setOnScrollBottomThreshold: this.setOnScrollBottomThreshold,
    };

    return (
      <Modal isOpen={isShow}
             onClose={onClose}
             inContainer={smallVersion}
             fullScreen={smallVersion}
             userSelect="none">

        <ModalHeader>
          <Heading h3><HeaderComponent/></Heading>
        </ModalHeader>

        <ModalBody threshold={5}
                   onScrollBottomThresholdCondition={scrollBottomThresholdCondition}
                   onScrollBottomThreshold={scrollBottomThreshold}>
          {step === steps.ON_GROUP_INFO ?
            <ModalThreadInfoGroupMain {...commonArguments} AvatarModalMediaFragment={AvatarModalMediaFragment}/>
            : step === steps.ON_SETTINGS ?
              <ModalThreadInfoGroupSettings  {...commonArguments}/>
              : step === steps.ON_ADMIN_ADD ?
                <ModalThreadInfoGroupSettingsAdminAdd  {...commonArguments}/>
                : <ModalThreadInfoGroupSettingsAdminList  {...commonArguments}/>
          }
        </ModalBody>

        <ModalFooter>
          <FooterComponent/>
        </ModalFooter>

      </Modal>
    );
  }
}

export default withRouter(ModalThreadInfoGroup);
