import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/runtime';
import Taro from '@tarojs/taro';
import pt from '@/plain-text';
import { AtCard, AtSteps, AtButton } from 'taro-ui';
import { RequestState } from '@/service';
import { getTicketInfo } from '@/service/ticketsInfo';
import { FixStatus } from '@/common';
import PageFooter from '@/components/PageFooter/PageFooter';
import NoteList from '@/components/NoteList/NoteList';
import { TicketNote, TicketInfo } from './TicketNote';

const mapStatusStep: Map<FixStatus, 0 | 1 | 2 | 3> = new Map([
  [1, 0],
  [2, 1],
  [3, 2],
  [4, 2],
  [5, 3],
]);

interface StepItemData {
  title: string;
}

interface TicketDetailState {
  current: number;
  items: Array<StepItemData>;
  ticketInfo: TicketInfo;
  notes: Array<TicketNote>;
  rs: RequestState;
}

export default class TicketDetail extends Component<{}, TicketDetailState> {
  state = {
    current: 0,
    items: [],
    ticketInfo: new TicketInfo(),
    notes: [new TicketNote()],
    rs: new RequestState(),
  };

  componentDidMount(): void {
    const navBar = pt.get().navBar;
    Taro.setNavigationBarTitle({
      title: navBar.ticketDetail,
    });
    const { router } = getCurrentInstance();
    const id = router?.params.id as number;
    const items = pt.get().ticketDetail.stepItems;
    this.setState({
      items: items,
    });

    getTicketInfo(this, id);
  }

  render(): ReactNode {
    if (this.state.rs.loading) {
      return <View>Loading</View>;
    } else if (!this.state.rs.success) {
      return <View>Request failed</View>;
    }

    const status = this.state.ticketInfo.status;
    this.setState({
      current: mapStatusStep.get(status) || 0,
    });

    return (
      <View>
        <View className='at-article__h1'>
          {this.state.ticketInfo.device +
            ' ' +
            this.state.ticketInfo.deviceModel}
        </View>
        <View className='at-article__info'>
          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
        </View>
        <View style={{ marginTop: 10, marginBottom: 10 }}>
          <AtCard title={pt.get().ticketDetail.descTitle}>
            <View className='at-article__h3'>
              {this.state.ticketInfo.description}
            </View>
          </AtCard>
        </View>
        <View style={{ padding: 10 }}>
          <AtSteps
            items={this.state.items}
            current={this.state.current}
            onChange={() => {}}
          />
        </View>
        <View
          className='at-row'
          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
        >
          <View
            className='at-col'
            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
            <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
          </View>
          <View
            className='at-col'
            style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
          >
            <AtButton type='secondary'>
              {pt.get().ticketDetail.addNote}
            </AtButton>
          </View>
        </View>
        <View style={{ padding: 10 }}>
          <NoteList noteList={this.state.notes} />
        </View>
        <PageFooter />
      </View>
    );
  }
}
