import { ComponentClass } from 'react'
import { connect } from '@tarojs/redux'
import { getTempList } from '@/actions/asyncCounter'
import Taro, { Component, Config } from '@tarojs/taro'
import TempItem from './conpoments/temp_item'
import { View, Input, ScrollView } from '@tarojs/components'

import './scss/index.scss'

type PageStateProps = {
  list: any[]
  count: number
}

type PageDispatchProps = {
  getTempListData: (page: number) => void
}

type PageOwnProps = {}

type PageState = {
  page: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Tempaltes {
  props: IProps
  state: PageState
}

@connect(
  ({ counter }) => {
    const { list, count } = counter.tempData
    return { list, count }
  },
  dispatch => ({
    getTempListData(page: number) {
      dispatch(getTempList(page))
    }
  })
)
class Tempaltes extends Component {
  config: Config = {
    navigationBarTitleText: '',
    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
  }
  constructor(props) {
    super(props)
    this.state = {
      page: 1
    }
  }

  async componentWillMount() {
    this.getData()
  }

  getData() {
    const { page } = this.state
    this.props.getTempListData(page)
  }

  shouldComponentUpdate(nextProps: IProps) {
    const { list } = this.props
    const { list: _list } = nextProps
    return _list !== list
  }

  render() {
    const { list } = this.props
    return (
      <View className="temp">
        <View className="temp-search-bar">
          <Input className="temp-search-bar-search" placeholder="请输入搜索关键词" />
        </View>
        <View className="temp-content">
          <ScrollView className="temp-content-scroll" scrollY>
            <View className="temp-content-scroll-list">
              {list.map(item => (
                <TempItem {...item} key={item.templateId} />
              ))}
            </View>
          </ScrollView>
        </View>
      </View>
    )
  }
}
export default Tempaltes as ComponentClass<PageOwnProps, PageState>