import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { AtList, AtListItem } from 'taro-ui';
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 './myTicket.scss';

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

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

  constructor(
    brand: string,
    model: string,
    status: FixStatus,
    createAt: moment.Moment,
  ) {
    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)}
      />
    );
  }
}

export default class SettingsPage extends Component {
  state = {
    fixList: [
      new TicketListItem('华硕', '天选3', 3, moment()),
      new TicketListItem('联想', '拯救者', 5, moment()),
    ],
  };
  render(): ReactNode {
    const fixListRenderer = this.state.fixList.map(item => item.render());
    return (
      <View>
        <AtList>{fixListRenderer}</AtList>
      </View>
    );
  }
}
