import {useEffect, useState, useRef} from "react";
import {useRouter} from '@tarojs/taro'
import {Button, Loading, CellGroup, Input, TextArea, Form, Picker} from '@nutui/nutui-react-taro'
import Taro from '@tarojs/taro'
import {AppEvent} from "@/api/app/appEvent/model";
import {getAppEvent, updateAppEvent, addAppEvent} from "@/api/app/appEvent";

const EVENT_TYPES = [
  { value: 'user_register', label: '用户注册' },
  { value: 'user_login', label: '用户登录' },
  { value: 'order_create', label: '订单创建' },
  { value: 'order_pay', label: '订单支付' },
  { value: 'custom', label: '自定义' }
];

const AddAppEvent = () => {
  const {params} = useRouter();
  const [loading, setLoading] = useState<boolean>(true)
  const [FormData, setFormData] = useState<AppEvent>({})
  const formRef = useRef<any>(null)

  const reload = async () => {
    if (params.id) {
      const data = await getAppEvent(Number(params.id))
      setFormData(data)
    } else {
      setFormData({})
    }
  }

  const submitSucceed = async (values: any) => {
    try {
      if (params.id) {
        await updateAppEvent({
          ...values,
          id: Number(params.id)
        })
      } else {
        await addAppEvent(values)
      }

      Taro.showToast({
        title: `操作成功`,
        icon: 'success'
      })

      setTimeout(() => {
        return Taro.navigateBack()
      }, 1000)
    } catch (error) {
      Taro.showToast({
        title: `操作失败`,
        icon: 'error'
      });
    }
  }

  const submitFailed = (error: any) => {
    console.log(error, 'err...')
  }

  useEffect(() => {
    reload().then(() => {
      setLoading(false)
    })
  }, []);

  if (loading) {
    return <Loading className={'px-2'}>加载中</Loading>
  }

  return (
    <>
      <Form
        ref={formRef}
        divider
        initialValues={FormData}
        labelPosition="left"
        onFinish={(values) => submitSucceed(values)}
        onFinishFailed={(errors) => submitFailed(errors)}
        footer={
          <div
            style={{
              display: 'flex',
              justifyContent: 'center',
              width: '100%'
            }}
          >
            <Button
              nativeType="submit"
              type="success"
              size="large"
              className={'w-full'}
              block
            >
              {params.id ? '更新' : '保存'}
            </Button>
          </div>
        }
      >
        <CellGroup style={{padding: '4px 0'}}>
          <Form.Item name="eventName" label="事件名称" initialValue={FormData.eventName} required>
            <Input placeholder="请输入事件名称" />
          </Form.Item>
          <Form.Item name="eventType" label="事件类型" initialValue={FormData.eventType}>
            <Picker options={EVENT_TYPES}>
              <Input placeholder="请选择事件类型" readonly />
            </Picker>
          </Form.Item>
          <Form.Item name="description" label="描述" initialValue={FormData.description}>
            <TextArea placeholder="请输入描述" />
          </Form.Item>
        </CellGroup>
      </Form>
    </>
  );
};

export default AddAppEvent;
