import * as React from 'react'
import { LofterTitle } from '../lofterTitle'
import log from '../utils/lofter-log'
import { BaseComponent } from '../base-component'
import { imgResize } from '../utils/imgResize'
import {genSpmLink} from "../utils/statistics";
import { get } from '../utils/request'

import {
  Props,
  State
} from './type'

import * as Styled from './index.style'
import styled, {
  keyframes
} from 'styled-components';

const slide = keyframes`
    0% {
      transform: translateX(0);
      -moz-transform: translateX(0);
      -o-transform: translateX(0);
      -webkit-transform: translateX(0);     
    }
    100% {
      transform: translateX(-50.5%);
      -moz-transform: translateX(-50.5%);
      -o-transform: translateX(-50.5%);
      -webkit-transform: translateX(-50.5%);
    }
  `

const Slide = styled.div`
  display: flex;
  position: absolute;
  // -moz-animation: ${slide} 40s linear infinite;
  // -o-animation: ${slide} 40s linear infinite;
  // -webkit-animation: ${slide} 40s linear infinite;
  // animation: ${slide} 40s linear infinite;
`;

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

  state = new State()

  timer: any = null
  count: number = 0
  wrapperInner: any = null

  getCardRank = async () => {
    const mockUrl = 'https://nei.hz.netease.com/api/apimock-v2/4480a4460c37314389da8a48f99251f7/market/cms/card/activity/rank.json'
    const url = '//www.lofter.com/market/cms/card/activity/rank.json'
    const res = await get(url)
    if (res) {
      this.setState({
        cardList: res.activityInfos
      })
    }
  }

  toCardDetail = (activityCode?: string) => {
    const randomCode = this.state.cardList[Math.floor(Math.random() * this.state.cardList.length)].activityCode
    log.capture('newusergift-9', {
      category: 'newusergift',
      action: 101,
      scene: 'newusergift',
      v: '1.0.0',
      activityId: 'newusergif'
    });
    const spmLink = genSpmLink({url: `https://www.lofter.com/market/fe/html/cardHome.html?activityCode=${activityCode || randomCode}&njb_navigator=false&adTrace=lft-card-gift_newuser_1-%7B"name"%3A"新人礼包"%7D`})
    location.href = spmLink;
  }

  initData = () => {
    this.getCardRank()
  }

  animation = () => {
    let dom = this.wrapperInner.style
    this.timer = setInterval(() => {
      this.count++
      if (this.count >= 224 * 10) {
        this.count = 0
      }
      dom.transform = `translateX(-${this.count*0.01}rem)`
    }, 20)
  }

  componentDidMount() {
    this.initData();
    this.animation()
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  render() {
    const { style, marginTop, title } = this.props
    const { cardList } = this.state

    return (
      <Styled.Container style={style}>
        <BaseComponent {...this.props}>
          <div className={marginTop && 'f-before'}>
            {
              title &&
              <LofterTitle title={title} />
            }
            <div className='cardBox' style={{ marginTop: `${marginTop}rem` }}>
              <div className='showing'>
                <Slide className='carouselBox' ref={(ele) => { this.wrapperInner = ele }}>
                  {
                    cardList && cardList.concat(cardList).map((card, index) => {
                      return (
                        <div className='content' onClick={() => {
                          this.toCardDetail(card.activityCode)
                        }}>
                          <img className="itemImg" src={imgResize(card.verticalImage, 144, 144, 1, true)} />
                          <div className='name'>{card.name}</div>
                        </div>
                      )
                    })
                  }
                </Slide>
              </div>
              <img src='https://imglf5.lf127.net/bkimg/20221116102739/068cba5c-6166-43e7-8b6a-1fc3a98c5802.png' />
              <button
                type='button'
                className='button'
                onClick={() => {
                  this.toCardDetail()
                }}
              >
                试试手气
              </button>
            </div>
          </div>
        </BaseComponent>
      </Styled.Container>
    )
  }
}