import { View } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import Taro from '@tarojs/taro';
import {
  AtForm,
  AtInput,
  AtButton,
  AtCheckbox,
  AtCard,
  AtSegmentedControl,
  AtMessage,
} from 'taro-ui';
import pt from '@/plain-text';
import PageFooter from '@/components/PageFooter/PageFooter';
import { submitTicket } from '@/service/submitTicket';
import type CustomTabBar from '@/custom-tab-bar';
import repairLogo from '@/assets/icons/RepairPage/repair.svg';
import './repair.scss';

interface RepairPageState {
  type: 0 | 1;
  device: string;
  deviceModel: string;
  owner: string;
  phone: string;
  description: string;
  isLoading: boolean;
  isDisable: boolean;
  checkedList: Array<number>;
}

const submitInterval = 5000;

export default class RepairPage extends Component<{}, RepairPageState> {
  state = {
    type: 1 as 0 | 1,
    device: '',
    deviceModel: '',
    owner: '',
    phone: '',
    description: '',
    isLoading: false,
    isDisable: true,
    checkedList: [0],
  };

  componentDidMount(): void {
    setTimeout(() => {
      this.setState({
        isDisable: false,
      });
    }, submitInterval);
  }

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

  handleTypeChange(type: 0 | 1) {
    this.setState({
      type: type,
    });
    return type;
  }

  handleDeviceChange(device: string) {
    this.setState({
      device: device,
    });
    return device;
  }

  handleDeviceModelChange(deviceModel: string) {
    this.setState({
      deviceModel: deviceModel,
    });
    return deviceModel;
  }

  handleOwnerChange(owner: string) {
    this.setState({
      owner: owner,
    });
    return owner;
  }

  handlePhoneChange(phone: string) {
    this.setState({
      phone: phone,
    });
    return phone;
  }

  handleDescriptionChange(description: string) {
    this.setState({
      description: description,
    });
    return description;
  }

  checkboxOption = [
    {
      value: 0,
      label: pt.get().repairPage.checkboxText.none,
    },
    {
      value: 1,
      label: pt.get().repairPage.checkboxText.usbDisk,
    },
    {
      value: 2,
      label: pt.get().repairPage.checkboxText.mouseOrReceiver,
    },
    {
      value: 3,
      label: pt.get().repairPage.checkboxText.powerAdapter,
    },
    {
      value: 4,
      label: pt.get().repairPage.checkboxText.others.label,
      desc: pt.get().repairPage.checkboxText.others.desc,
    },
  ];

  handleCheckboxChange(checkedList: Array<number>) {
    this.setState({
      checkedList: checkedList,
    });
    return checkedList;
  }

  onSubmit() {
    this.setState({
      isLoading: true,
      isDisable: true,
    });
    submitTicket(this);
    Taro.reLaunch({
      url: '/pages/repair/repair',
    });
  }

  render(): ReactNode {
    return (
      <View>
        <AtMessage />
        <AtCard
          note={pt.get().repairPage.cardText.note}
          title={pt.get().repairPage.cardText.title}
          thumb={repairLogo}
        >
          <AtForm onSubmit={this.onSubmit.bind(this)}>
            <AtSegmentedControl
              values={[
                pt.get().repairPage.typeText.appliance,
                pt.get().repairPage.typeText.computer,
              ]}
              onClick={this.handleTypeChange.bind(this)}
              current={this.state.type}
            />
            <AtInput
              clear
              required
              name='device'
              title={pt.get().repairPage.deviceText.title}
              type='text'
              placeholder={pt.get().repairPage.deviceText.placeholder}
              value={this.state.device}
              onChange={this.handleDeviceChange.bind(this)}
            />
            <AtInput
              clear
              required
              name='deviceModel'
              title={pt.get().repairPage.deviceModelText.title}
              type='text'
              placeholder={pt.get().repairPage.deviceModelText.placeholder}
              value={this.state.deviceModel}
              onChange={this.handleDeviceModelChange.bind(this)}
            />
            <AtInput
              clear
              required
              name='owner'
              title={pt.get().repairPage.ownerText.title}
              type='text'
              placeholder={pt.get().repairPage.ownerText.placeholder}
              value={this.state.owner}
              onChange={this.handleOwnerChange.bind(this)}
            />
            <AtInput
              clear
              required
              name='phone'
              title={pt.get().repairPage.phoneText.title}
              type='number'
              placeholder={pt.get().repairPage.phoneText.placeholder}
              value={this.state.phone}
              onChange={this.handlePhoneChange.bind(this)}
            />
            <AtInput
              clear
              required
              name='description'
              title={pt.get().repairPage.descriptionText.title}
              type='text'
              placeholder={pt.get().repairPage.descriptionText.placeholder}
              value={this.state.description}
              onChange={this.handleDescriptionChange.bind(this)}
            />
            <AtCheckbox
              options={this.checkboxOption}
              selectedList={this.state.checkedList}
              onChange={this.handleCheckboxChange.bind(this)}
            />
            <AtButton
              loading={this.state.isLoading}
              formType='submit'
              type='primary'
              disabled={this.state.isDisable}
            >
              {pt.get().button.buttonText.submit}
            </AtButton>
          </AtForm>
        </AtCard>
        <PageFooter />
      </View>
    );
  }
}