import { View } from '@tarojs/components';
import { Component, ReactNode } from 'react';
import Taro from '@tarojs/taro';
import { AtForm, AtInput, AtButton, AtRadio, AtCheckbox } 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 './repair.scss';

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

export default class RepairPage extends Component<{}, RepairPageState> {
  state = {
    type: 1 as 0 | 1,
    device: '',
    deviceModel: '',
    owner: '',
    phone: '',
    description: '',
    isLoading: false,
    isDisable: false,
    checkedList: [0],
  };
  // 以下是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() {
    submitTicket(this);
  }

  render(): ReactNode {
    return (
      <View>
        <AtForm onSubmit={this.onSubmit.bind(this)}>
          <AtRadio
            options={[
              { label: pt.get().repairPage.typeText.appliance, value: 0 },
              { label: pt.get().repairPage.typeText.computer, value: 1 },
            ]}
            value={this.state.type}
            onClick={this.handleTypeChange.bind(this)}
          />
          <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.deviceText.title}
            type='text'
            placeholder={pt.get().repairPage.deviceText.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>
        <PageFooter />
      </View>
    );
  }
}
