import FilmList from './film_list'
import DeviceList from './device_list'
import { ComponentClass } from 'react'
import { AtTabs, AtTabsPane } from 'taro-ui'
import Taro, { Component, Config } from '@tarojs/taro'

import './index.scss'
import { View } from '@tarojs/components'

type PageStateProps = {}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  current: number
  windowHeight: number
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface Device {
  props: IProps
  state: PageState
}

const tabList = [{ title: '我的视片' }, { title: '我的设备' }]
class Device extends Component {
  config: Config = {
    navigationBarTitleText: '',
    navigationStyle: process.env.TARO_ENV === 'rn' ? 'custom' : 'default'
  }
  constructor(props) {
    super(props)

    const { windowHeight } = Taro.getSystemInfoSync()
    this.state = {
      current: 1,
      windowHeight: windowHeight - 43
    }
  }

  changePage = value => {
    this.setState({ current: value })
  }

  render() {
    const { current, windowHeight } = this.state
    return (
      <AtTabs current={current} tabList={tabList} onClick={this.changePage} swipeable={false}>
        <AtTabsPane current={current} index={0}>
          <View style={{ height: `${windowHeight}px` }}>
            <FilmList height={windowHeight} />
          </View>
        </AtTabsPane>
        <AtTabsPane className="at-tabs-page" current={current} index={1}>
          <View style={{ height: `${windowHeight}px` }}>
            <DeviceList height={windowHeight} />
          </View>
        </AtTabsPane>
      </AtTabs>
    )
  }
}
export default Device as ComponentClass<PageOwnProps, PageState>