import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/runtime';
import pt from '@/plain-text';
import { AtButton, AtModal } from 'taro-ui';
import DetailFramework from '@/components/DetailFramework/DetailFramework';
import PageFooter from '@/components/PageFooter/PageFooter';

interface TicketDetailState {
  id: number;
  isMember: boolean;
  showModel: boolean;
}

export default class TicketDetail extends Component<{}, TicketDetailState> {
  state: Readonly<TicketDetailState> = {
    id: 0,
    isMember: false,
    showModel: false,
  };

  componentDidMount(): void {
    const { router } = getCurrentInstance();
    const id = router?.params.id as number;
    const isMember = router?.params.isMember as boolean;
    this.setState({
      id: id,
      isMember: isMember,
    });
  }

  onAddToOreo(): void {
    this.setState({
      showModel: true,
    });
  }

  handleCancel(): void {
    this.setState({
      showModel: false,
    });
  }

  handleConfirm(): void {
    return;
  }

  render(): ReactNode {
    const middleButton = this.state.isMember ? (
      <View
        className='at-row'
        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
      >
        <View
          className='at-col'
          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
        >
          <AtButton type='secondary'>{pt.get().ticketDetail.pick}</AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginLeft: 10, paddingRight: 5, width: '33%' }}
          onClick={this.onAddToOreo.bind(this)}
        >
          <AtButton type='primary'>{pt.get().ticketDetail.addToOreo}</AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginRight: 10, paddingLeft: 5, width: '33%' }}
        >
          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
        </View>
      </View>
    ) : (
      <View
        className='at-row'
        style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
      >
        <View
          className='at-col'
          style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
        >
          <AtButton type='primary'>{pt.get().ticketDetail.tookAway}</AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
        >
          <AtButton type='secondary'>{pt.get().ticketDetail.addNote}</AtButton>
        </View>
      </View>
    );

    const isInfoShow = {
      device: true,
      createdTime: true,
      description: true,
      current: true,
      notelist: true,
      showAllNotes: true,
    };

    return (
      <View>
        <AtModal
          isOpened={this.state.showModel}
          title={pt.get().modal.addToOreo.title}
          cancelText={pt.get().modal.cancel}
          confirmText={pt.get().modal.confirm}
          onCancel={this.handleCancel.bind(this)}
          onConfirm={this.handleConfirm.bind(this)}
          content={pt.get().modal.addToOreo.content}
        />
        <DetailFramework
          middleButton={middleButton}
          id={this.state.id}
          isInfoShow={isInfoShow}
        />
        <PageFooter />
      </View>
    );
  }
}