'use strict';

import React from 'react';
import { observer } from 'mobx-react';
import './taskpop.less';
import { unwatchPageVisibility, watchPageVisibility } from '@/core/page-visibility-notify.ts';
// import { handleLogClick, handleLogExposure } from '../../../MD';
import { RES_PATH } from '../../../sparkrc';
import { _throttle } from '../../utils/utils';
import { TASK_CODE,CHANNEL_PARAMS } from '../../utils/constants.ts';
import { setCookies } from '../../store/fetcher';
import taskStore from '../../store/task';
import store from '../../store';
// import { LOG_KEY, MatterShareOpt, MatterViewOpt, pageView, sensorLog } from '../../utils/sensors';
import { ModalCtrl } from '@/core/ctrls/ModalCtrl';
import { Button } from '@grace/ui';

@observer
class Taskpop extends React.Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {

    window.infoCallBack = taskStore.getInfoCallback;
    window.browseCallBack = taskStore.getBrowseCallback;

    await taskStore.getTaskList();
    watchPageVisibility(this.onPageVisibilityChange);

    this.initSensor();


  }

  initSensor() {
    
    // pageView("b10875", {
    //   page_name: "赚次数任务页",
    // });

    // sensorLog(LOG_KEY.exposure,"b7870","d8729");
    // sensorLog(LOG_KEY.exposure, "b10875", "d10877", {
    //   page_name: "赚次数任务页",
    //   button_name: "领取奖励按钮",
    // });
    // sensorLog(LOG_KEY.exposure, "b10875", "d10876", {
    //   page_name: "赚次数任务页",
    //   button_name: "去完成按钮",
    // });
  }

  componentWillUnmount() {
    unwatchPageVisibility(this.onPageVisibilityChange);
  }

  onPageVisibilityChange = async (visible) => {
    if (visible) {
      await setCookies();
      await taskStore.getTaskList();
    }
  };

  /** 去完成 */
  taskDoHandle = _throttle(async (item) => {
    const {taskStatus, code} = item || {};
    // if(code == TASK_CODE.INVITE){
    //   MatterShareOpt(LOG_KEY.click,"b7870","d8729")
    // }
    // sensorLog(LOG_KEY.click, "b10875", "d10876", {
    //   page_name: "赚次数任务页",
    //   button_name: "去完成按钮",
    // });
    await taskStore.doTask(item);
  })

  /** 领奖 */
  taskPrizeHandle = _throttle(async (item) => {
    const { code, taskStatus } = item || {};
    // sensorLog(LOG_KEY.click, "b10875", "d10877", {
    //   page_name: "赚次数任务页",
    //   button_name: "领取奖励按钮",
    // });

    await taskStore.getTaskPrize(item);
  })

  close = () => {
    // sensorLog(LOG_KEY.click, "b7394", "d7398", {
    //   page_name: "做任务赚骰子页",
    //   button_name: "关闭按钮",
    // });

    ModalCtrl.closeModal()
    // store.getHomeInfo()
  }

  render() {
    const {taskList} = taskStore;
    return (
      <div className="taskpop topPop_move">
        <span className="bg"></span>
        <Button className="close md36" onClick={this.close}></Button>
        <span className="bg_list"></span>
        <div className="list">
          {
            taskList?.length > 0 &&
            taskList.map((val, key) => {
              // val?.taskStatus == 0 && handleLogExposure(37, 1)
              // val?.taskStatus == 1 && handleLogExposure(37, 2)
              return (
                <div className="item" key={key}>
                  <span className="bg_item"></span>
                  <div className="center_info">
                    <span className="title">{`${val?.title}(${val?.completedSize}/${val?.intervalLimitSize})`}</span>
                    {/* 「浏览企业人人保」、「浏览畅行保产品计划A赠险」、「浏览畅行保产品计划B赠险」 app端任务描述取描述 后端直接接口处理了 */}
                    <span className="subtitle textover">{val?.subTitle}</span>
                  </div>
                  <img src={val?.icon} className="icon" />
                  <div className="btns">
                    {/* 去完成 */}
                    {
                      val?.taskStatus == 0 &&
                      (
                        CFG.channel != CHANNEL_PARAMS.RB_APP ||
                        (CFG.channel == CHANNEL_PARAMS.RB_APP && val?.code?.indexOf(TASK_CODE.BROWSE_SPECIAL_SHOW) < 0)
                      ) &&
                      <Button className="complete_btn" onClick={() => this.taskDoHandle(val)}></Button>
                    }
                    {/* 待领取 */}
                    {val?.taskStatus == 1 &&
                      <Button className="receive_btn" onClick={() => this.taskPrizeHandle(val)}></Button>}
                    {/* 已完成 */}
                    {val?.taskStatus == 2 && <Button className="already_btn"></Button>}
                  </div>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default Taskpop;
