import { Component, ReactNode } from 'react';
import { View } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/runtime';
import pt from '@/plain-text';
import {
  AtActionSheet,
  AtActionSheetItem,
  AtButton,
  AtFloatLayout,
  AtForm,
  AtMessage,
  AtModal,
  AtTextarea,
} from 'taro-ui';
import DetailFramework from '@/components/DetailFramework/DetailFramework';
import PageFooter from '@/components/PageFooter/PageFooter';
import { submitComment } from '@/service/submitComment';
import Taro from '@tarojs/taro';
import wechatUser from '@/wechat';
import { addToOreo } from '@/service/addToOreo';
import { pickTicket } from '@/service/pickTicket';
import { retrieve } from '@/service/retrieve';
import { changeStatus } from '@/service/changeStatus';

const submitInterval = 5000;

interface TicketDetailState {
  id: number;
  isMember: boolean;
  showOreoModal: boolean;
  showCommentModal: boolean;
  showRetrieveModal: boolean;
  showStatusSheet: boolean;
  showPickModal: boolean;
  comment: string;
  isLoading: boolean;
  isDisable: boolean;
  isOreoLoading: boolean;
  isOreoDisable: boolean;
  isPickLoading: boolean;
  isPickDisable: boolean;
  isRetrieveLoading: boolean;
  isRetrieveDisable: boolean;
  isStatusLoading: boolean;
  isStatusDisable: boolean;
}

export default class TicketDetail extends Component<{}, TicketDetailState> {
  state: Readonly<TicketDetailState> = {
    id: 0,
    isMember: false,
    showOreoModal: false,
    showCommentModal: false,
    showRetrieveModal: false,
    showStatusSheet: false,
    showPickModal: false,
    comment: '',
    isLoading: false,
    isDisable: false,
    isOreoLoading: false,
    isOreoDisable: false,
    isPickLoading: false,
    isPickDisable: false,
    isRetrieveLoading: false,
    isRetrieveDisable: false,
    isStatusLoading: false,
    isStatusDisable: false,
  };

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

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

  onAddComment(): void {
    this.setState({
      showCommentModal: true,
    });
  }

  onRetrieved(): void {
    this.setState({
      showRetrieveModal: true,
    });
  }

  onPick(): void {
    this.setState({
      showPickModal: true,
    });
  }

  onChangeStatus(): void {
    this.setState({
      showStatusSheet: true,
    });
  }

  handleOreoCancel(): void {
    this.setState({
      showOreoModal: false,
    });
  }

  handleCommentCancel(): void {
    this.setState({
      showCommentModal: false,
    });
  }

  handleRetrieveCancel(): void {
    this.setState({
      showRetrieveModal: false,
    });
  }

  handleStatusCancel(): void {
    this.setState({
      showStatusSheet: false,
    });
  }

  handlePickCancel(): void {
    this.setState({
      showPickModal: false,
    });
  }

  handleOreoConfirm(): void {
    this.setState({
      isOreoDisable: true,
      showOreoModal: false,
    });
    addToOreo(this);
    setTimeout(() => {
      this.setState({
        isOreoDisable: false,
      });
    }, submitInterval);
    return;
  }

  handleRetrieveConfirm(): void {
    this.setState({
      isRetrieveDisable: true,
      showRetrieveModal: false,
    });
    retrieve(this);
    setTimeout(() => {
      this.setState({
        isRetrieveDisable: false,
      });
    }, submitInterval);
    return;
  }

  handlePickConfirm(): void {
    this.setState({
      isPickDisable: true,
      showPickModal: false,
    });
    pickTicket(this);
    setTimeout(() => {
      this.setState({
        isPickDisable: false,
      });
    }, submitInterval);
    return;
  }

  handleStatusChange(status: number): void {
    this.setState({
      showStatusSheet: false,
      isStatusDisable: true,
    });
    changeStatus(this, status);
    setTimeout(() => {
      this.setState({
        isStatusDisable: false,
      });
    }, submitInterval);
    return;
  }

  handleCommentChange(comment: string) {
    this.setState({
      comment: comment,
    });
    return comment;
  }

  onCommentSubmit() {
    this.setState({
      isDisable: true,
    });
    if (this.state.comment == '') {
      Taro.atMessage({
        message: pt.get().button.submitText.blank,
        type: 'error',
      });
      setTimeout(() => {
        this.setState({
          isDisable: false,
        });
      }, submitInterval);
      return;
    }
    submitComment(this);
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, submitInterval);
  }

  render(): ReactNode {
    const middleButton = this.state.isMember ? (
      <View>
        <View
          className='at-row'
          style={{ paddingTop: 10, paddingBottom: 10, width: '100%' }}
        >
          <View
            className='at-col'
            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
            <AtButton
              loading={this.state.isPickLoading}
              disabled={this.state.isPickDisable}
              type='secondary'
              onClick={this.onPick.bind(this)}
            >
              {pt.get().ticketDetail.pick}
            </AtButton>
          </View>
          <View
            className='at-col'
            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
            <AtButton
              loading={this.state.isOreoLoading}
              disabled={this.state.isOreoDisable}
              type='primary'
              onClick={this.onAddToOreo.bind(this)}
            >
              {pt.get().ticketDetail.addToOreo}
            </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
              loading={this.state.isStatusLoading}
              disabled={this.state.isStatusDisable}
              type='secondary'
              onClick={this.onChangeStatus.bind(this)}
            >
              {pt.get().ticketDetail.addNote}
            </AtButton>
          </View>
          <View
            className='at-col'
            style={{ marginLeft: 10, paddingRight: 5, width: '50%' }}
          >
            <AtButton type='secondary' onClick={this.onAddComment.bind(this)}>
              {pt.get().ticketDetail.addNote}
            </AtButton>
          </View>
        </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
            loading={this.state.isRetrieveLoading}
            disabled={this.state.isRetrieveDisable}
            type='primary'
            onClick={this.onRetrieved.bind(this)}
          >
            {pt.get().ticketDetail.tookAway}
          </AtButton>
        </View>
        <View
          className='at-col'
          style={{ marginRight: 10, paddingLeft: 5, width: '50%' }}
        >
          <AtButton type='secondary' onClick={this.onAddComment.bind(this)}>
            {pt.get().ticketDetail.addNote}
          </AtButton>
        </View>
      </View>
    );

    const isInfoShow = {
      device: true,
      createdTime: true,
      description: true,
      info: wechatUser.getAccess() ? true : false,
      current: true,
      notelist: true,
      showAllNotes: true,
    };

    return (
      <View>
        <AtMessage />
        <AtModal
          isOpened={this.state.showOreoModal}
          title={pt.get().modal.addToOreo.title}
          cancelText={pt.get().modal.cancel}
          confirmText={pt.get().modal.confirm}
          onCancel={this.handleOreoCancel.bind(this)}
          onConfirm={this.handleOreoConfirm.bind(this)}
          content={pt.get().modal.addToOreo.content}
        />
        <AtModal
          isOpened={this.state.showRetrieveModal}
          title={pt.get().modal.retrieve.title}
          cancelText={pt.get().modal.cancel}
          confirmText={pt.get().modal.confirm}
          onCancel={this.handleRetrieveCancel.bind(this)}
          onConfirm={this.handleRetrieveConfirm.bind(this)}
          content={pt.get().modal.retrieve.content}
        />
        <AtModal
          isOpened={this.state.showPickModal}
          title={pt.get().modal.pick.title}
          cancelText={pt.get().modal.cancel}
          confirmText={pt.get().modal.confirm}
          onCancel={this.handlePickCancel.bind(this)}
          onConfirm={this.handlePickConfirm.bind(this)}
          content={pt.get().modal.pick.content}
        />
        <AtFloatLayout
          isOpened={this.state.showCommentModal}
          title={pt.get().ticketDetail.comment.title}
          onClose={this.handleCommentCancel.bind(this)}
        >
          <AtForm onSubmit={this.onCommentSubmit.bind(this)}>
            <AtMessage />
            <AtTextarea
              value={this.state.comment}
              onChange={this.handleCommentChange.bind(this)}
              maxLength={200}
              height={200}
              placeholder={pt.get().ticketDetail.comment.placeholder}
            />
            <AtButton
              loading={this.state.isLoading}
              formType='submit'
              type='primary'
              disabled={this.state.isDisable}
            >
              {pt.get().button.buttonText.submit}
            </AtButton>
          </AtForm>
        </AtFloatLayout>
        <AtActionSheet
          isOpened={this.state.showStatusSheet}
          cancelText={pt.get().ticketDetail.status.cancel}
          title={pt.get().ticketDetail.status.title}
          onCancel={this.handleStatusCancel.bind(this)}
          onClose={this.handleStatusCancel.bind(this)}
        >
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 0)}>
            {pt.get().ticketDetail.status.status0}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 1)}>
            {pt.get().ticketDetail.status.status1}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 2)}>
            {pt.get().ticketDetail.status.status2}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 3)}>
            {pt.get().ticketDetail.status.status3}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 4)}>
            {pt.get().ticketDetail.status.status4}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 5)}>
            {pt.get().ticketDetail.status.status5}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 6)}>
            {pt.get().ticketDetail.status.status6}
          </AtActionSheetItem>
          <AtActionSheetItem onClick={this.handleStatusChange.bind(this, 7)}>
            {pt.get().ticketDetail.status.status7}
          </AtActionSheetItem>
        </AtActionSheet>
        <DetailFramework
          middleButton={middleButton}
          id={this.state.id}
          isInfoShow={isInfoShow}
        />
        <PageFooter />
      </View>
    );
  }
}