import * as React from 'react'
import debounce from 'lodash.debounce'
import smoothscroll from 'smoothscroll-polyfill'

import log from '../utils/lofter-log'


import {
  Props,
  State,
} from './type'
import { get } from '../utils/request';

import { showMessage } from '../common/toast/toast'
import { TemplateActivityContext } from '../common/template-context'

import { oneTemplateActivityRequest } from '../utils/one-request'

import * as Styled from './index.style'

smoothscroll.polyfill()

export class TemplateActivityContainer extends React.Component<Props, State> {

  static defaultProps = new Props()

  state = new State()

  debounceFetch = debounce(this.getActivityInfo.bind(this), 400)

  componentDidMount() {
    this.getActivityInfo()
    document.getElementById('app').style.minHeight = '100vh'
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.activityId !== this.props.activityId) {
      this.debounceFetch()
    }
  }

  async getActivityInfo() {
    if (!this.props.activityId) return
    const { contextValue } = this.state
    let res = await oneTemplateActivityRequest(this.props.activityId).oneFetch()
    if (res.code === 200) {
      log.capture('act-1', {
        category: 'actmould',
        action: 100,
        scene: 'actmould',
        actid: this.props.activityId.trim(),
        v: 'H5'
      })
      this.setState({
        contextValue: {
          activityInfo: res.data,
          isLoading: false,
          getActivityInfo: this.getActivityInfo.bind(this)
        }
      })
    } else {
      this.setState({
        contextValue: {
          ...contextValue,
          activityInfo: undefined,
          isLoading: false,
          getActivityInfo: this.getActivityInfo.bind(this)
        }
      })
      showMessage({
        text: res.msg
      })
    }
  }

  render() {
    const { children, style, isEdit,backgroundImage } = this.props
    const isEmpty = Array.isArray(children)
      ? children.length === 0
      : !children
    return (
      <div 
        style={style}
        // 修复 safari 下编辑器无法显示 position：fixed 的按钮
        ref={(node) => {
          if (node) {
            node.style.setProperty("z-index", "auto", "important");
          }
        }}
      >
        {backgroundImage && <img src={this.props.backgroundImage.url}/>}
        <TemplateActivityContext.Provider value={this.state.contextValue}>
          {
            isEmpty
              ? (
                <Styled.EmptyContainer>
                  模板活动容器，模板活动组件相关请添加至该容器下
                </Styled.EmptyContainer>
              )
              : this.props.activityId
                ? this.state.contextValue.isLoading && isEdit
                  ? (
                    <Styled.EmptyContainer>
                      活动模板信息加载中...
                    </Styled.EmptyContainer>
                  )
                  : children
                : (
                  <Styled.EmptyContainer>
                    请填入活动ID
                  </Styled.EmptyContainer>
                )
          }
        </TemplateActivityContext.Provider>
      </div>
    )
  }
}