import { View, Text } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import Taro from '@tarojs/taro';
import { AtCard, AtTimeline, AtAccordion } from 'taro-ui';
import type CustomTabBar from '@/custom-tab-bar';
import PageFooter from '@/components/PageFooter/PageFooter';
import pt from '@/plain-text';
import './index.scss';

interface 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>
    );
  }
}

class DutyInfo extends Component {
  render(): ReactNode {
    return (
      <View>
        <Text>x人在岗</Text>
      </View>
    );
  }
}

class StepInfo extends Component {
  render(): ReactNode {
    return (
      <View>
        <AtTimeline items={pt.get().mainPage.stepList}></AtTimeline>
      </View>
    );
  }
}

class TipsInfo extends Component {
  render(): ReactNode {
    return (
      <View>
        <AtTimeline items={pt.get().mainPage.tipsList}></AtTimeline>
      </View>
    );
  }
}

export default class Index extends Component {
  state = {
    dutyInfoCard: {
      title: pt.get().mainPage.cardTitle.dutyInfo,
      note: 'Tips',
      extra: '额外信息',
      content: <DutyInfo />,
    },
    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 />,
    },
  };

  // 以下是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>
        <View className='page-title'>
          <View className='at-article__h1'>{mainPage.mainTitleLine}</View>
          <View className='at-article__h1'>{mainPage.subTitleLine}</View>
        </View>
        <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>
    );
  }
}