import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { AtList, AtListItem } from 'taro-ui';
import Taro from '@tarojs/taro';
import moment from 'moment';
import repair from '@/assets/icons/MyTickets/repair.svg';
import finished from '@/assets/icons/MyTickets/finished.svg';
import tick from '@/assets/icons/MyTickets/tick.svg';
import fail from '@/assets/icons/MyTickets/fail.svg';
import pt from '@/plain-text';
import { getUrl } from '@/service';
import './myTicket.scss';

type FixStatus = 1 | 2 | 3 | 4 | 5;

class TicketListItem {
  id: number;
  brand: string;
  model: string;
  status: FixStatus;
  createAt: moment.Moment;
  iconMap: Map<FixStatus, string>;

  constructor(
    id: number,
    brand: string,
    model: string,
    status: FixStatus,
    createAt: moment.Moment,
  ) {
    this.id = id;
    this.brand = brand;
    this.model = model;
    this.status = status;
    this.createAt = createAt;
    this.iconMap = new Map<FixStatus, string>([
      [1, repair],
      [2, repair],
      [3, finished],
      [4, tick],
      [5, fail],
    ]);
  }

  render(): JSX.Element {
    const tl = pt.get().ticketList;
    return (
      <AtListItem
        title={this.brand + ' ' + this.model}
        note={tl.createdAt(this.createAt.format('YYYY-MM-DD HH:mm'))}
        extraText={tl.statusMap.get(this.status)}
        arrow='right'
        thumb={this.iconMap.get(this.status)}
        onClick={() => {
          Taro.navigateTo({
            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
          });
        }}
      />
    );
  }
}

export default class SettingsPage extends Component {
  state = {
    loading: true,
    success: false,
    fixList: [new TicketListItem(0, '', '', 1, moment())],
  };

  componentDidMount(): void {
    Taro.setNavigationBarTitle({
      title: pt.get().navBar.user.myTicket,
    });
    Taro.request({
      url: getUrl('/user/mytickets'),
      method: 'GET',
      data: {
        token: 'token_test',
      },
    })
      .then(res => {
        if (!res.data.success) {
          this.setState({
            loading: false,
            success: false,
          });
          return;
        }
        this.setState({
          loading: false,
          success: true,
          fixList: res.data.data.list.map(
            item =>
              new TicketListItem(
                item.id,
                item.device,
                item.deviceModel,
                item.status,
                moment(),
              ),
          ),
        });
      })
      .catch(reason => {
        this.setState({
          loading: false,
          success: false,
        });
        console.log(reason);
      });
  }

  render(): ReactNode {
    if (this.state.loading) {
      return <View>loading</View>;
    }
    if (!this.state.success) {
      return <View>Failed</View>;
    }
    const fixListRenderer = this.state.fixList.map(item => item.render());
    return (
      <View>
        <AtList>{fixListRenderer}</AtList>
      </View>
    );
  }
}