import { BasicProps, BasicState, EditSetting } from '../type'
import { MissionsResponseData, MissionActivityVO, AwardActivityVO } from '@type/missions';
import { ExtractArrayItem } from '@type/utils'


export interface BlogInfo {
  blogNickName: string,
  headImage: string,
}

export class Props extends BasicProps {
  public editSetting: EditSetting = {
    key: 'gaea-activity-mission',
    name: '活动-任务+兑换模块',
    isAutoHeight: false,
    defaultPosition: {
      top: '0',
      left: '0'
    },
    editors: [
      '活动配置',
      {
        field: 'activityCode',
        text: '活动code',
        type: 'string'
      },
      {
        field: 'mainColor',
        text: '主色调',
        type: 'color'
      },
      {
        field: 'alwaysPopup',
        text: '弹窗一直展示',
        type: 'boolean'
      },
      '站外配置',
      {
        field: 'viewOutApp',
        text: '站外可查看',
        type: 'boolean'
      },
      {
        field: 'bgOutApp',
        text: '站外背景图',
        type: 'image'
      },
      '样式（单位为rem，屏幕总宽度为10）',
      '弹窗区样式',
      {
        field: 'missionPanel.titleImage',
        text: '任务弹窗标题图片',
        type: 'image'
      },
      {
        field: 'missionPanel.topGap',
        text: '任务弹窗顶部间距',
        type: 'number'
      },
      {
        field: 'awardPanel.titleImage',
        text: '兑换弹窗标题图片',
        type: 'image'
      },
      {
        field: 'awardPanel.topGap',
        text: '兑换弹窗顶部间距',
        type: 'number'
      },
      {
        field: 'addressModal.buttonImage',
        text: '地址填写弹窗——提交按钮图片',
        type: 'image'
      },
      {
        field: 'createBtn.text',
        text: '引导创作按钮文字',
        type: 'string'
      },
      {
        field: 'createBtn.tag',
        text: '引导创作发布Tag',
        type: 'string'
      },
      {
        field: 'createBtn.content',
        text: '引导创作发布内容',
        type: 'string'
      },
      {
        field: 'pointRuleUrl',
        text: '积分规则链接',
        type: 'string'
      },
      {
        field: 'exchangeRuleUrl',
        text: '兑换规则链接',
        type: 'string'
      },
      '任务触发区',
      {
        field: 'mission.width',
        text: '宽度',
        type: 'number'
      },
      {
        field: 'mission.height',
        text: '高度',
        type: 'number'
      },
      {
        field: 'mission.left',
        text: '左边距',
        type: 'number'
      },
      {
        field: 'mission.top',
        text: '上边距',
        type: 'number'
      },
      '兑换触发区',
      {
        field: 'award.width',
        text: '宽度',
        type: 'number'
      },
      {
        field: 'award.height',
        text: '高度',
        type: 'number'
      },
      {
        field: 'award.left',
        text: '左边距',
        type: 'number'
      },
      {
        field: 'award.top',
        text: '上边距',
        type: 'number'
      },
      '编辑器',
      {
        field: 'previewMission',
        text: '预览任务弹窗',
        type: 'boolean',
      },
      {
        field: 'previewAward',
        text: '预览兑换弹窗',
        type: 'boolean',
      },
      {
        field: 'previewAddress',
        text: '预览地址弹窗',
        type: 'boolean',
      },
    ]
  };

  public style: React.CSSProperties = {
    display: 'block',
    width: '100px',
    height: '100px',
    zIndex: 2,
  };

  public missionPanel: {
    titleImage: {
      url: string,
    },
    topGap: number,
  } = {
    titleImage: {
      url: ''
    },
    topGap: 0,
  }

  public awardPanel: {
    titleImage: {
      url: string,
    },
    topGap: number,
  } = {
    titleImage: {
      url: ''
    },
    topGap: 0,
  }

  public mission: {
    width: number,
    height: number,
    left: number,
    top: number,
  } = {
    left: 0,
    top: 0,
    width: 2,
    height: 2,
  }

  public award: {
    width: number,
    height: number,
    left: number,
    top: number,
  } = {
    left: 0,
    top: 1,
    width: 2,
    height: 2,
  }

  public createBtn: {
    text: string,
    tag: string,
    content: string,
  } = {
    text: '去创作',
    tag: '',
    content: '',
  }

  addressModal: {
    buttonImage?: {
      url: string,
    }
  } = {
    buttonImage: {
      url: 'https://lofter.lf127.net/1645517391995/address_submit.png'
    }
  }

  alwaysPopup: boolean = true;
  maskClickTarget: string = '';
  previewMission: boolean = false;
  previewAward: boolean = false;
  previewAddress: boolean = false;
  activityCode: string = '';
  pointRuleUrl: string = '';
  exchangeRuleUrl: string = '';
  mainColor: string = '#C6BA88'
  viewOutApp: boolean = false;
  bgOutApp: {
    url: string
  } = {
    url: ''
  };
}

export class State extends BasicState {
  public showMissionPopup: boolean = false;
  public showAwardPopup: boolean = false;
  public showAddressModal: boolean = false;
  scrollRef: HTMLElement;
  viewportLeft: number;
  isLogin: boolean = false;
  points: number = 0;
  pointsIcon: string = 'https://lofter.lf127.net/1648196955529/jiaozi.png';
  missionData: MissionActivityVO | undefined;
  awardData: AwardActivityVO | undefined;
  blogInfo: BlogInfo = {
    blogNickName: '',
    headImage: '',
  };
  safeBottom: number = 0;
  showScrollTip: boolean = false;
}