import { BasicProps, BasicState, EditSetting } from '../type'

export class Props extends BasicProps {
  public editSetting: EditSetting = {
    key: 'gaea-hotArea',
    name: '热区',
    isContainer: false,
    editors: [
      {
        field: 'link',
        text: '跳转链接',
        type: 'link'
      },
      {
        field: 'fixed',
        text: '是否相对屏幕固定位置',
        type: 'boolean'
      },
      '埋点相关',
      {
        field: 'eventName',
        text: '名称（用于数据报表事件标识）',
        type: 'string'
      },
      {
        field: 'presetEventName',
        text: '卡牌预设事件名称',
        type: 'select',
        data: [{
          text: '主街区-抽卡入口',
          value: '主街区-抽卡入口'
        }, {
          text: '主街区-市集入口',
          value: '主街区-市集入口'
        }, {
          text: '主街区-其他非通用入口',
          value: '主街区-其他非通用入口'
        }, {
          text: '取消选择',
          value: ''
        }]
      },
      '跳转链接无法站外打开时可开启下一配置',
      {
        field: 'needLofterApp',
        text: 'Lofter产品H5点击该热区是否先唤起APP',
        type: 'boolean',
        helper: '点击该热区是否先唤起LOFTER App'
      },
      '只有跳转链接为H5地址才可开启下一配置',
      {
        field: 'lofterNewWebview',
        text: 'Lofter App内是否使用新webview打开',
        type: 'boolean'
      },
      {
        field: 'lofterNewWebviewTransparent',
        text: '新WebView是否透明（7.5.6+）',
        type: 'boolean'
      },
      'Style',
      {
        field: 'style.backgroundColor',
        text: '背景颜色',
        type: 'color'
      },
      {
        field: 'backgroundImage',
        text: '背景图片',
        type: 'image'
      },
      '埋点',
      {
        field: 'pageType',
        text: '页面类型',
        type: 'select',
        data: [
          {
            text: '模板活动',
            value: 'template'
          },
          {
            text: '其他',
            value: 'other'
          }
        ]
      },
    ]
  };

  public fixed = false;

  public pageType = 'other';

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

  public imgStyle: React.CSSProperties = {
    display: 'block',
    width: '100%',
    maxWidth: '100%'
  };

  public link: {
    /**
     * 0 普通链接
     * 1 市集商品
     * 2 市集优惠券
     * 3 剪切板口令
     * 4 JSBridge
     */
    type: 0 | 1 | 2 | 3 | 4,
    value: string,
    data?: string,
  }

  public needLofterApp: boolean = false
  public lofterNewWebview: boolean = false
  public lofterNewWebviewTransparent: boolean = false

  public backgroundImage: {
    url: string
  }
}

export class State extends BasicState {
  viewportLeft: number
  viewportTop: number
}