import { Button, FormInstance, Space } from "antd";
import { inject, observer } from "mobx-react";
import { useEffect } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { useParams } from "react-router";
const PushConfig = (props: Store) => {
  const { appStore } = props;
  const { id } = useParams();
  const hwformRef = React.useRef<FormInstance>(null);
  const iosformRef = React.useRef<FormInstance>(null);
  const opformRef = React.useRef<FormInstance>(null);
  const vivoformRef = React.useRef<FormInstance>(null);
  const xmformRef = React.useRef<FormInstance>(null);

  useEffect(() => {
    hwformRef.current?.setFieldsValue(appStore.item.pushHwawei);
    iosformRef.current?.setFieldsValue(appStore.item.pushIos);
    opformRef.current?.setFieldsValue(appStore.item.pushOppo);
    vivoformRef.current?.setFieldsValue(appStore.item.pushVivo);
    xmformRef.current?.setFieldsValue(appStore.item.pushXiaomi);
  }, [appStore.item, id]);

  const onFinishFailed = () => {};

  const iosOnFinish = (values: any) => {
    appStore.setIosConfig(id, values);
  };
  const xmOnFinish = (values: any) => {
    appStore.setXmConfig(id, values);
  };
  const hwOnFinish = (values: any) => {
    appStore.setHwConfig(id, values);
  };
  const oppoOnFinish = (values: any) => {
    appStore.setOPConfig(id, values);
  };
  const vivoOnFinish = (values: any) => {
    appStore.setVivoConfig(id, values);
  };
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>苹果推送</p>
            <Button
              type="primary"
              onClick={() => {
                iosformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formRef={iosformRef}
            formName={""}
            colProps={0}
            onFinish={iosOnFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "appleBundleId",
                name: "appleBundleId",
                value: "",
                rules: [{ required: true, message: "请输入appleBundleId!" }],
              },
              {
                type: "input",
                label: "password",
                name: "password",
                value: "",
                rules: [{ required: true, message: "请输入推送密码!" }],
              },
              {
                type: "upload",
                label: "推送证书",
                name: "centerFile",
                value: [],
                rules: [{ required: true, message: "请上传推送证书!" }],
              },
            ]}
          />
        </div>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>华为推送</p>
            <Button
              type="primary"
              onClick={() => {
                hwformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formName={""}
            formRef={hwformRef}
            colProps={0}
            onFinish={hwOnFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "huaWeiClientID",
                name: "huaWeiClientID",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "huaWeiClientSecret",
                name: "huaWeiClientSecret",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>oppo推送</p>
            <Button
              type="primary"
              onClick={() => {
                opformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>

          <SimpleForm
            formRef={opformRef}
            formName={""}
            colProps={0}
            onFinish={oppoOnFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "oppoAppKey",
                name: "oppoAppKey",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "oppoMasterSecret",
                name: "oppoMasterSecret",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>vivo推送</p>
            <Button
              type="primary"
              onClick={() => {
                vivoformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formRef={vivoformRef}
            formName={""}
            colProps={0}
            onFinish={vivoOnFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "vivoappId",
                name: "vivoappId",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "vivoAppKey",
                name: "vivoAppKey",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "vivoAppSecret",
                name: "vivoAppSecret",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
        <div style={{ backgroundColor: "#fff", padding: "10px" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}>
            <p>小米推送</p>
            <Button
              type="primary"
              onClick={() => {
                xmformRef.current?.submit();
              }}
            >
              保存
            </Button>
          </div>
          <SimpleForm
            formRef={xmformRef}
            formName={""}
            colProps={0}
            onFinish={xmOnFinish}
            onFinishFailed={onFinishFailed}
            formDatas={[
              {
                type: "input",
                label: "xiaoMiappId",
                name: "xiaoMiappId",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "xiaoMiAppKey",
                name: "xiaoMiAppKey",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "xiaoMiAppSecret",
                name: "xiaoMiAppSecret",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
              {
                type: "input",
                label: "xiaoMiAppChannelId",
                name: "xiaoMiAppChannelId",
                value: "",
                rules: [{ required: true, message: "请输入卡片名称!" }],
              },
            ]}
          />
        </div>
      </Space>
    </div>
  );
};

export default inject("appStore")(observer(PushConfig));