import { Component, ReactNode } from 'react';
import { View, Image } from '@tarojs/components';
import { AtTimeline } from 'taro-ui';
import pt from '@/plain-text';
import tick from '@/assets/icons/MainPage/tick.svg';
import cross from '@/assets/icons/MainPage/cross.svg';

export class DutyData {
  constructor() {
    this.isInDuty = false;
    this.inDutyCnt = 3;
    this.currentDuty = '2';
    this.offDutyReason = '学园维修';
    this.dutyRecoverTime = '下周一';
  }

  isInDuty: boolean;
  inDutyCnt: number;
  currentDuty: 'off' | '1' | '2' | '3';
  offDutyReason: string; // from backend
  dutyRecoverTime: string; // from backend
}

class Card extends Component {
  props = {
    isInDuty: false,
  };
  render(): ReactNode {
    const inDuty = this.props.isInDuty;
    const dc = pt.get().mainPage.dutyCard;
    const title = inDuty ? dc.inDuty.title : dc.offDuty.title;
    const iconsrc = inDuty ? tick : cross;
    return (
      <View>
        <View
          style={{
            display: 'flex',
            alignItems: 'center',
            marginBottom: 20,
          }}
        >
          <Image
            src={iconsrc}
            style={{
              width: 24,
              height: 24,
            }}
          />
          <View
            style={{
              marginLeft: 10,
              fontSize: 36,
            }}
          >
            {title}
          </View>
        </View>
      </View>
    );
  }
}

export class DutyInfo extends Component {
  props = {
    data: new DutyData(),
  };

  offDutyContent(): ReactNode {
    const data = this.props.data;
    const od = pt.get().mainPage.dutyCard.offDuty;
    return (
      <View>
        <Card isInDuty={data.isInDuty} />
        <AtTimeline
          items={[
            { title: od.reason(data.offDutyReason) },
            { title: od.recoverTime(data.dutyRecoverTime) },
          ]}
        />
      </View>
    );
  }

  inDutyContent(): ReactNode {
    const data = this.props.data;
    const id = pt.get().mainPage.dutyCard.inDuty;
    return (
      <View>
        <Card isInDuty={data.isInDuty} />
        <AtTimeline
          items={[
            { title: id.currentDutyText(data.currentDuty) },
            { title: id.inDutyCnt(data.inDutyCnt) },
          ]}
        />
      </View>
    );
  }

  render(): ReactNode {
    if (this.props.data.isInDuty) {
      return this.inDutyContent();
    } else {
      return this.offDutyContent();
    }
  }
}