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

export class Props extends BasicProps {
  public editSetting: EditSetting = {
    key: 'gaea-template-activity-signup',
    name: '模板活动-报名',
    isAutoHeight: true,
    defaultPosition: {
      top: '0',
      left: '0'
    },
    editors: [
      {
        field: 'btnText',
        text: '按钮文案',
        type: 'string',
      },
      {
        field: 'btnBackgroundColor',
        text: '按钮背景颜色',
        type: 'color'
      },
      {
        field: 'color',
        text: '文本颜色',
        type: 'color'
      },
      {
        field: 'btnBackgroundImage',
        text: '报名按钮背景图案',
        type: 'image'
      },
      {
        field: 'signedBtnBackgroundImage',
        text: '已报名按钮背景图案',
        type: 'image'
      },
      {
        field: 'btnWidth',
        text: '按钮宽度',
        type: 'number',
        data: {
          input: [0, Number.MAX_SAFE_INTEGER],
          step: 0.1
        }
      },
      {
        field: 'fixed',
        text: '固定屏幕定位',
        type: 'boolean',
      },
      {
        field: 'paddingTop',
        text: '模块上边距',
        type: 'number'
      },
      {
        field: 'paddingBottom',
        text: '模块下边距',
        type: 'number'
      },
      '编辑器',
      {
        field: 'previewSigned',
        text: '预览已报名效果',
        type: 'boolean',
      },
      '归因',
      {
        field: 'incantation',
        text: '剪切板口令',
        type: 'string'
      }
    ]
  };

  public btnText: string = '报名';

  public color: string = '#ffffff';

  public btnBackgroundColor: string = '#14C4BC';

  public btnWidth: number = 5.4;

  public previewSigned: boolean = false;

  public btnBackgroundImage: {
    url: string;
    width: number;
    height: number;
  };

  public signedBtnBackgroundImage: {
    url: string;
    width: number;
    height: number;
  }

  public isAutoHeight = true;

  public paddingTop = 0;
  public paddingBottom = 0;

  public incantation = '';

  public fixed = false;

  public style: React.CSSProperties = {
    width: '10rem',
  };
}

export class State extends BasicState {
  public showModal: boolean = false;
  public signup: boolean | undefined = undefined;
  viewportLeft: number;
}