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

interface StepItemData {
  title: string;
}

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

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

interface DetailFrameworkProps {
  middleButton: JSX.Element;
  id: number;
  isInfoShow: { [key: string]: boolean };
}

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,
    });
    getTicketInfo(this, this.props.id);
  }

  props: Readonly<DetailFrameworkProps> = {
    middleButton: <View></View>,
    id: 0,
    isInfoShow: {
      device: true,
      createdTime: true,
      description: true,
      current: true,
      notelist: true,
      showAllNotes: true,
    },
  };

  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,
      items: pt.get().ticketDetail.stepItems,
    });

    const elements: ShowElements = {
      device: this.props.isInfoShow['device'] ? (
        <View className='at-article__h1'>
          {this.state.ticketInfo.device +
            ' ' +
            this.state.ticketInfo.deviceModel}
        </View>
      ) : (
        <View></View>
      ),
      createdTime: this.props.isInfoShow['createdTime'] ? (
        <View className='at-article__info'>
          {pt.get().common.createdAtText(this.state.ticketInfo.createdTime)}
        </View>
      ) : (
        <View></View>
      ),
      description: this.props.isInfoShow['description'] ? (
        <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></View>
      ),
      current: this.props.isInfoShow['current'] ? (
        <View style={{ padding: 10 }}>
          <AtSteps
            items={this.state.items}
            current={this.state.current}
            onChange={() => {}}
          />
        </View>
      ) : (
        <View></View>
      ),
      notelist: this.props.isInfoShow['notelist'] ? (
        this.props.isInfoShow['showAllNotes'] ? (
          <View style={{ padding: 10 }}>
            <NoteList noteList={this.state.notes} />
          </View>
        ) : (
          <View style={{ padding: 10 }}>
            <NoteList noteList={[this.state.notes[-1]]} />
          </View>
        )
      ) : (
        <View></View>
      ),
    };

    return (
      <View>
        {elements.device}
        {elements.createdTime}
        {elements.description}
        {elements.current}
        {this.props.middleButton}
        {elements.notelist}
      </View>
    );
  }
}