import { postDeviceGroupCreateDeviceGroup } from '@/services/device/DeviceGroup';
import {
  ModalForm,
  ProForm,
  ProFormSelect,
  ProFormSwitch,
  ProFormText,
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Form, Switch, message } from 'antd';
import { proFormItemStyleProps, proFormModelWidth } from '../../../../../config/defaultForm';
import React, { useEffect, useState } from 'react';
export type FormValueType = {
  target?: string;
  template?: string;
  type?: string;
  time?: string;
  frequency?: string;
} & Partial<API.DeviceGroup>;

export type CreateFormProps = {
  createModalOpen: boolean;
  handleModal: () => void;
  values: Partial<API.DeviceGroup>;
  reload: any;
};
const CreateForm: React.FC<CreateFormProps> = (props) => {
  const intl = useIntl();
  const [isAuto, setIsAuto] = useState(true);
  const [form] = Form.useForm<API.DeviceGroup>();

  const [parentId, setParentId] = useState<number>(0);
  const [parentSelectOptions, setParentSelectOptions] = useState<any[]>([
    { label: '根节点', value: 0 },
  ]);

  useEffect(() => {
    if (props.values.id !== undefined && props.values.id !== 0) {
      setParentId(props.values.id as number);
      setParentSelectOptions([{ label: props.values.name, value: props.values.id }]);
    }
  }, [props.createModalOpen]);

  return (
    <ModalForm<API.DeviceGroup>
    width={proFormModelWidth}
      title={intl.formatMessage({
        id: 'device.device_group.table.list.add',
        defaultMessage: '$$$',
      })}
      open={props.createModalOpen}
      form={form}
      autoFocusFirstInput
      modalProps={{
        destroyOnClose: true,
        onCancel: () => props.handleModal(),
      }}
      submitTimeout={2000}
      onFinish={async (values) => {
        postDeviceGroupCreateDeviceGroup(values)
          .then(() => {
            message.success(intl.formatMessage({ id: 'common.success', defaultMessage: '$$$' }));
            props.reload();
          })
          .catch(() => {
            message.error(intl.formatMessage({ id: 'common.failure', defaultMessage: '$$$' }));
          });
        props.handleModal();
        return true;
      }}
    >
      <ProForm.Group>
        <ProFormSelect
          width={proFormItemStyleProps.column2Width}
          name="parentFkId"
          initialValue={parentId}
          disabled={true}
          label={
            <FormattedMessage id="device.device_group.table.list.parentFkId" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_select',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.parentFkId',
            defaultMessage: '$$$',
          })}`}
          request={async () => parentSelectOptions}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="name"
          label={<FormattedMessage id="device.device_group.table.list.name" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.name',
            defaultMessage: '$$$',
          })}`}
          required={true}
          rules={[
            {
              required: true,
              message: (
                <FormattedMessage
                  id="device.device_group.table.rule.required.name"
                  defaultMessage="name is required"
                />
              ),
            },
          ]}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="code"
          label={<FormattedMessage id="device.device_group.table.list.code" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.code',
            defaultMessage: '$$$',
          })}`}
          required={!isAuto}
          initialValue=""
          disabled={isAuto}
          rules={
            isAuto
              ? []
              : [
                  {
                    required: true,
                    message: (
                      <FormattedMessage
                        id="device.device_group.table.rule.required.code"
                        defaultMessage="code is required"
                      />
                    ),
                  },
                ]
          }
          addonAfter={
            <Switch
              checked={isAuto}
              checkedChildren={<FormattedMessage id="common.auto" defaultMessage="$$$" />}
              unCheckedChildren={<FormattedMessage id="common.edit" defaultMessage="$$$" />}
              onChange={setIsAuto}
            />
          }
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="address"
          label={
            <FormattedMessage id="device.device_group.table.list.address" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.address',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="telephone"
          label={
            <FormattedMessage id="device.device_group.table.list.telephone" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.telephone',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="lon"
          label={<FormattedMessage id="device.device_group.table.list.lon" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.lon',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="lat"
          label={<FormattedMessage id="device.device_group.table.list.lat" defaultMessage="$$$" />}
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.lat',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="managerName"
          label={
            <FormattedMessage
              id="device.device_group.table.list.managerName"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.managerName',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="managerPhone"
          label={
            <FormattedMessage
              id="device.device_group.table.list.managerPhone"
              defaultMessage="$$$"
            />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.managerPhone',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />


        <ProFormText
          width={proFormItemStyleProps.column2Width}
          name="remark"
          label={
            <FormattedMessage id="device.device_group.table.list.remark" defaultMessage="$$$" />
          }
          placeholder={`${intl.formatMessage({
            id: 'common.please_input',
            defaultMessage: '$$$',
          })}${intl.formatMessage({
            id: 'device.device_group.table.list.remark',
            defaultMessage: '$$$',
          })}`}
          required={false}
        />
                <ProFormSwitch
          width={proFormItemStyleProps.column2Width}
          name="isEnable"
          label={
            <FormattedMessage id="device.device_group.table.list.isEnable" defaultMessage="$$$" />
          }
          initialValue={true}
        />
      </ProForm.Group>
    </ModalForm>
  );
};
export default CreateForm;
