import { View } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import Taro from '@tarojs/taro';
import { AtCard, AtAccordion } from 'taro-ui';
import type CustomTabBar from '@/custom-tab-bar';
import PageFooter from '@/components/PageFooter/PageFooter';
import pt from '@/plain-text';
import { getDutyInfo } from '@/service/MainPage';
import './index.scss';
import TitleCard from './TitleCard';
import { DutyInfo, DutyData } from './DutyInfo';
import { StepInfo, TipsInfo } from './StepTipsInfo';

class CardContent {
  title: string;
  note: string;
  extra: JSX.Element | string;
  content: () => JSX.Element;
}

function mainPageCard(c: CardContent): JSX.Element {
  return (
    <View style={{ marginTop: 10 }}>
      <AtCard note={c.note} extra={c.extra} title={c.title}>
        {c.content()}
      </AtCard>
    </View>
  );
}

class ExpandItem extends Component {
  state = {
    open: false,
  };
  props = {
    title: '',
    content: <View></View>,
  };

  handleClick(value: boolean) {
    this.setState({ open: value });
  }

  render(): ReactNode {
    return (
      <View>
        <AtAccordion
          open={this.state.open}
          onClick={this.handleClick.bind(this)}
          title={this.props.title}
        >
          {this.props.content}
        </AtAccordion>
      </View>
    );
  }
}

interface MainPageState {
  dutyData: DutyData;
  dutyInfoCard: CardContent;
  stepInfoCard: CardContent;
  tipsInfoCard: CardContent;
  //rs: RequestState;
}

export default class MainPage extends Component<{}, MainPageState> {
  state = {
    dutyData: new DutyData(),
    dutyInfoCard: {
      title: pt.get().mainPage.cardTitle.dutyInfo,
      note: 'Tips',
      extra: '额外信息',
      content: () => <DutyInfo data={this.state.dutyData} />,
    },
    stepInfoCard: {
      title: pt.get().mainPage.cardTitle.stepInfo,
      note: 'Tips 请在20:30以前取走自己的物品哦',
      extra: '额外信息',
      content: () => <StepInfo />,
    },
    tipsInfoCard: {
      title: pt.get().mainPage.cardTitle.tipsInfo,
      note: 'Tips',
      extra: '额外信息',
      content: () => <TipsInfo />,
    },
    // rs: new RequestState(),
  };

  componentDidMount(): void {
    getDutyInfo(this);
  }

  // 以下是TabBar相关
  pageCtx = Taro.getCurrentInstance().page;
  componentDidShow() {
    const tabbar = Taro.getTabBar<CustomTabBar>(this.pageCtx);
    tabbar?.setSelected(0);
  }
  // 以上是TabBar相关

  render(): ReactNode {
    const mainPage = pt.get().mainPage;
    return (
      <View>
        <TitleCard />
        <View style={{ marginTop: 30 }}>
          {mainPageCard(this.state.dutyInfoCard)}
          {mainPageCard(this.state.tipsInfoCard)}
          <ExpandItem
            title={mainPage.expandTitle.stepInfo}
            content={mainPageCard(this.state.stepInfoCard)}
          />
        </View>
        <PageFooter />
      </View>
    );
  }
}