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

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 DetailFrameworkState {
  current: number;
  items: Array<StepItemData>;
  ticketInfo: TicketInfo;
  notes: Array<TicketNote>;
  rs: RequestState;
}

interface DetailFrameworkProps {
  middleButton: JSX.Element;
  id: number;
}

export default class DetailFramework extends Component<
  DetailFrameworkProps,
  DetailFrameworkState
> {
  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 items = pt.get().ticketDetail.stepItems;
    this.setState({
      items: items,
    });
    getTicketInfo(this, this.props.id);
  }

  props: Readonly<DetailFrameworkProps> = {
    middleButton: <View></View>,
    id: 0,
  };

  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>

        {this.props.middleButton}

        <View style={{ padding: 10 }}>
          <NoteList noteList={this.state.notes} />
        </View>
        <PageFooter />
      </View>
    );
  }
}