import { AtList, AtListItem, AtToast } from 'taro-ui';
import { Component, ReactNode } from 'react';
import { View, Picker, Image, Text } from '@tarojs/components';
import { getUrl } from '@/service';
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';

const listLangInterval = 20;
const memberClickTimes = 7;

export default class UserPage extends Component {
  state = {
    selector: ['简体中文', 'English'],
    selectorChecked: {
      zh_CN: '简体中文',
      en_US: 'English',
    }[pt.getCurLang()],
    clicks: memberClickTimes,
    isToastOpen: false,
    toastText:
      pt.get().userPage.memberEntry.front +
      memberClickTimes.toString() +
      pt.get().userPage.memberEntry.behind,
  };

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

  onTapImage = () => {
    this.setState({
      clicks: this.state.clicks - 1,
    });
    if (this.state.clicks < 3) {
      this.setState({
        toastText:
          pt.get().userPage.memberEntry.front +
          (this.state.clicks + 1).toString() + // React State's feature
          pt.get().userPage.memberEntry.behind,
        isToastOpen: true,
      });
      if (this.state.clicks == 0) {
        this.setState({
          isToastOpen: false,
          clicks: memberClickTimes,
        });
        Taro.navigateTo({
          url: '/pages/user/member/member',
        });
      }
    }
  };

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

  onSelect = (e: { detail: { value: string | number } }) => {
    this.setState({
      selectorChecked: this.state.selector[e.detail.value],
    });
    let currentLang = this.showLangDict[this.state.selector[e.detail.value]];
    pt.setLang(currentLang);
    Taro.request({
      url: getUrl('/user/locale/update'),
      method: 'POST',
      data: {
        token: 'token_test',
        lang: currentLang,
      },
    }).then(res => {
      console.log(res.data);
    });
    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
            onTap={this.onTapImage}
            style='width: 100px;height: 100px;'
            src={logo}
          />
        </View>
        <AtToast
          isOpened={this.state.isToastOpen}
          text={this.state.toastText}
        ></AtToast>
        <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}
          />
          <View style={{ height: listLangInterval }}></View>
          <Picker
            mode='selector'
            range={this.state.selector}
            onChange={this.onSelect}
          >
            <AtList>
              <AtListItem
                title='语言 / Language'
                extraText={this.state.selectorChecked}
              />
            </AtList>
          </Picker>
        </AtList>
        <PageFooter />
      </View>
    );
  }
}