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


export class Props extends BasicProps {
  public editSetting: EditSetting = {
    key: 'gaea-card-mission',
    name: '卡牌-任务+兑换模块',
    isAutoHeight: false,
    defaultPosition: {
      top: '0',
      left: '0'
    },
    editors: [
      '活动配置',
      {
        field: 'activityCode',
        text: '活动code',
        type: 'string'
      },
      {
        field: 'mainColor',
        text: '主色调',
        type: 'color'
      },
      '弹窗配置',
      {
        field: 'alwaysShow',
        text: '弹窗一直展示（是则触发区不显示）',
        type: 'boolean'
      },
      {
        field: 'maskClickTarget',
        text: '点击蒙层跳转（需开启上一配置）',
        type: 'string'
      },
      '样式（单位为rem，屏幕总宽度为10）',
      '规则按钮',
      {
        field: 'ruleUrl',
        text: '规则页面地址',
        type: 'string'
      },
      {
        field: 'ruleMarginLeft',
        text: '规则按钮左边距',
        type: 'number'
      },
      {
        field: 'missionRuleTop',
        text: '任务弹窗上边距(rem)',
        type: 'number'
      },
      {
        field: 'awardRuleTop',
        text: '兑换弹窗上边距(rem)',
        type: 'number'
      },
      '任务触发区',
      {
        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: 'dot.width',
        text: '宽度',
        type: 'number'
      },
      {
        field: 'dot.height',
        text: '高度',
        type: 'number'
      },
      {
        field: 'dot.left',
        text: '左边距',
        type: 'number'
      },
      {
        field: 'dot.top',
        text: '上边距',
        type: 'number'
      },
      {
        field: 'dot.backgroundColor',
        text: '背景色',
        type: 'color'
      },
      {
        field: 'dot.borderColor',
        text: '边框色',
        type: 'color'
      },
      '兑换触发区',
      {
        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: 'point.width',
        text: '宽度',
        type: 'number'
      },
      {
        field: 'point.height',
        text: '高度',
        type: 'number'
      },
      {
        field: 'point.left',
        text: '左边距',
        type: 'number'
      },
      {
        field: 'point.top',
        text: '上边距',
        type: 'number'
      },
      {
        field: 'point.font',
        text: '字体文件地址(ttf格式)',
        type: 'string'
      },
      {
        field: 'point.fontSize',
        text: '字体大小',
        type: 'number'
      },
      {
        field: 'point.color',
        text: '字体颜色',
        type: 'color'
      },
      '弹窗区样式',
      {
        field: 'combinedBackground.topImage',
        text: '弹窗背景顶部图片',
        type: 'image'
      },
      {
        field: 'combinedBackground.centerImage',
        text: '弹窗背景中部图片（Y轴重复）',
        type: 'image'
      },
      {
        field: 'combinedBackground.bottomImage',
        text: '弹窗背景底部图片',
        type: 'image'
      },
      {
        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: 'missionPanel.triggerImage',
        text: '按钮背景图片',
        type: 'image'
      },
      {
        field: 'missionPanel.triggerText',
        text: '按钮文字（有图片不显示）',
        type: 'string'
      },
      '兑换弹窗触发任务按钮(都无则不展示)',
      {
        field: 'awardPanel.triggerImage',
        text: '按钮背景图片',
        type: 'image'
      },
      {
        field: 'awardPanel.triggerText',
        text: '按钮文字（有图片不显示）',
        type: 'string'
      },
      '编辑器',
      {
        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 mission: {
    width: number,
    height: number,
    left: number,
    top: number,
  } = {
      left: 0,
      top: 0,
      width: 2,
      height: 2,
    }
  public dot: {
    width: number,
    height: number,
    left: number,
    top: number,
    backgroundColor: string,
    borderColor: string,
  } = {
      left: 0,
      top: 0,
      width: 0.3,
      height: 0.3,
      backgroundColor: '#F27D50',
      borderColor: '#ffc59b'
    }
  public award: {
    width: number,
    height: number,
    left: number,
    top: number,
  } = {
      left: 0,
      top: 1,
      width: 2,
      height: 2,
    }
  public point: {
    width: number,
    height: number,
    left: number,
    top: number,
    font: string,
    fontSize: number,
    color: string,
  } = {
      left: 1,
      top: 0,
      width: 2,
      height: 2,
      font: 'https://lofter.lf127.net/1645096592583/jiangxzk2.TTF',
      fontSize: 0.4,
      color: '#F27D50'
    }

  public missionPanel: {
    titleImage: {
      url: string,
    },
    topGap: number,
    triggerImage: {
      url: string,
    },
    triggerText: string,
  } = {
      titleImage: {
        url: ''
      },
      topGap: 0,
      triggerImage: {
        url: ''
      },
      triggerText: '奖品兑换'
    }

  public awardPanel: {
    titleImage: {
      url: string,
    },
    topGap: number,
    triggerImage: {
      url: string,
    },
    triggerText: string,
  } = {
      titleImage: {
        url: ''
      },
      topGap: 0,
      triggerImage: {
        url: ''
      },
      triggerText: '去做任务'
    }

  public combinedBackground: {
    topImage?: {
      url: string,
    },
    centerImage?: {
      url: string,
    },
    bottomImage?: {
      url: string,
    },
  } = {
      topImage: {
        url: 'https://lofter.lf127.net/1645500094971/common_bg_top.png',
      },
      centerImage: {
        url: 'https://lofter.lf127.net/1645500163966/common_bg_mid.png',
      },
      bottomImage: {
        url: 'https://lofter.lf127.net/1645500190758/common_bg_bottom.png',
      },
    }

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

  alwaysShow: boolean = false;
  maskClickTarget: string = '';
  previewMission: boolean = false;
  previewAward: boolean = false;
  previewAddress: boolean = false;
  activityCode: string = '';
  ruleUrl: string = '';
  ruleMarginLeft: number = 0;
  missionRuleTop: number = 0;
  awardRuleTop: number = 0;
  mainColor: string = '#C6BA88'
}

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;
  /** 
   * 提示是否有可领取任务 -1：无 0：有
   */
  hintMissionStatus: number;
}