import { AtList, AtListItem } from 'taro-ui';
import { Component, ReactNode } from 'react';
import { View, Picker, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import type CustomTabBar from '@/custom-tab-bar';
import PageFooter from '@/components/PageFooter/PageFooter';
import aboutIcon from '@/assets/icons/AboutPage/about.svg';
import pt, { Lang } from '@/plain-text';
import logo from '@/assets/images/UserPage/logo.png';
import './user.scss';

export default class UserPage extends Component {
  state = {
    selector: ['简体中文', 'English'],
    selectorChecked: {
      zh_CN: '简体中文',
      en_US: 'English',
    }[pt.getCurLang()],
  };

  // 以下是TabBar相关
  pageCtx = Taro.getCurrentInstance().page;
  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(2);
  }
  // 以上是TabBar相关

  showLangDict: Record<string, Lang> = {
    简体中文: 'zh_CN',
    English: 'en_US',
  };

  onSelect = (e: { detail: { value: string | number } }) => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
    });
    pt.setLang(this.showLangDict[this.state.selector[e.detail.value]]);
    Taro.reLaunch({
      url: '/pages/user/user',
    });
  };

  myTicketPage() {
    Taro.navigateTo({
      url: '/pages/user/myTicket/myTicket',
    });
  }

  informPage() {
    Taro.navigateTo({
      url: '/pages/user/inform/inform',
    });
  }

  reportPage() {
    Taro.navigateTo({
      url: '/pages/user/report/report',
    });
  }

  aboutPage() {
    Taro.navigateTo({
      url: '/pages/user/about/about',
    });
  }

  render(): ReactNode {
    return (
      <View>
        <View
          className='at-row at-row__justify--center at-row__align--end'
          style='height:110px;'
        >
          <Image style='width: 100px;height: 100px;' src={logo} />
        </View>
        <View
          className='at-row at-row__justify--center at-row__align--center'
          style='height:60px;color:#696969;'
        >
          <Text> EVA Notify v0.0.1</Text>
        </View>
        <AtList>
          <AtListItem
            title={pt.get().userPage.ticketColumn.title}
            note={pt.get().userPage.ticketColumn.note}
            arrow='right'
            iconInfo={{ color: '#E69966', value: 'clock' }}
            onClick={this.myTicketPage}
          />
          <AtListItem
            title={pt.get().userPage.infoColumn.title}
            note={pt.get().userPage.infoColumn.note}
            arrow='right'
            iconInfo={{ color: '#78A4FA', value: 'user' }}
            onClick={this.informPage}
          />
          <AtListItem
            title={pt.get().userPage.reportColumn.title}
            note={pt.get().userPage.reportColumn.note}
            extraText=''
            arrow='right'
            iconInfo={{ color: '#9ACD32', value: 'message' }}
            onClick={this.reportPage}
          />
          <AtListItem
            title={pt.get().userPage.aboutColumn.title}
            note={pt.get().userPage.aboutColumn.note}
            extraText=''
            arrow='right'
            thumb={aboutIcon}
            onClick={this.aboutPage}
          />
          <Picker
            mode='selector'
            range={this.state.selector}
            onChange={this.onSelect}
          >
            <AtList>
              <AtListItem
                title='语言 / Language'
                extraText={this.state.selectorChecked}
              />
            </AtList>
          </Picker>
        </AtList>
        <PageFooter />
      </View>
    );
  }
}
