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;
  dutyRecoverTime?: string;
}

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: '40rpx',
          }}
        >
          <Image
            src={iconsrc}
            style={{
              width: '48rpx',
              height: '48rpx',
            }}
          />
          <View
            style={{
              marginLeft: '20rpx',
              fontSize: '60rpx',
              fontWeight: 'bold',
            }}
          >
            {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 as string) },
            { title: od.recoverTime(data.dutyRecoverTime as string) },
          ]}
        />
      </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 || 'off') },
            { title: id.inDutyCnt(data.inDutyCnt as number) },
          ]}
        />
      </View>
    );
  }

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