import * as React from 'react';
import { Props, State } from './type';
import {Area} from './index.style';
import {handleScheme} from '../utils/snailTargetHandler';
// import parseScheme from '../utils/parseScheme';
// import openSnailApp from 'nw-app-snail';
// import {isSnail} from 'snail-helpers';
// import {getLogInstance} from 'snail-log';

export class SnailHotArea extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();

  private clickHandler() {
    const {target, logPointId, isEdit} = this.props;
    handleScheme({target, logPointId, logQuery: {
      category: 'acttemplate',
      url: target
    }, isEdit});
  }
  public render() {
    const {activeBackgroundColor, backgroundColor, backgroundImage, borderRadius, style, imgStyle} = this.props;
    return (
      <Area 
        activeBackgroundColor={activeBackgroundColor} 
        backgroundColor={backgroundColor}
        style={{
          ...style,
          borderRadius: `${borderRadius}rem`
        }} 
        onTouchStart={() => {}}
        onClick={this.clickHandler.bind(this)}
      >
        {backgroundImage && <img style={imgStyle} src={backgroundImage.url}/>}
      </Area>
    )
  }
}