import './style.less'

import classnames from 'classnames'
import React, { PureComponent } from 'react'

export interface Props {
  children: any
  className?: string
  startTransform?: string
  endTransform?: string
  selected?: boolean
  onClick?: (e: React.MouseEvent) => void
}

export default class ClickAnime extends PureComponent<
  Props,
  { touchIn: boolean }
> {
  public static defaultProps = {
    startTransform: 'scale(1)',
    endTransform: 'scale(1.08)',
    selected: false
  }
  public el: HTMLDivElement | null = null
  public state = { touchIn: false }
  public touchStart = () => {
    this.setState({ touchIn: true })
  }
  public touchEnd = () => {
    this.setState({ touchIn: false })
  }
  public render() {
    const {
      children,
      className,
      startTransform,
      endTransform,
      selected,
      onClick
    } = this.props
    return (
      <div
        className={classnames('ph-click-anime', className)}
        style={{
          transform:
            this.state.touchIn || selected ? endTransform : startTransform
        }}
        onClick={e => {
          if (onClick) onClick(e)
        }}
        ref={el => (this.el = el)}
        onTouchStart={this.touchStart}
        onTouchEnd={this.touchEnd}
        onTouchCancel={this.touchEnd}
      >
        {children}
      </div>
    )
  }
}