import {
  ProForm,
  ProFormCheckbox,
  ProFormDependency,
  ProFormGroup,
  ProFormList,
  ProFormRadio,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Form } from 'antd';
import { useEffect } from 'react';
type AlarmSetFormProps = {
  currentRow: Record<string, any>;
};
const AlarmSetForm: React.FC<AlarmSetFormProps> = (props) => {
  const [form] = Form.useForm<API.DeviceCategory>();

  // const [initialValues, setInitialValues] = useState<Record<string, any>>({});

  function fetchInitialValues() {
    // setInitialValues({
    //   type: '2',
    //   ways: [
    //     {
    //       label: '短信',
    //       value: [],
    //       isChecked: [],
    //     },
    //     {
    //       label: '邮件',
    //       value: [],
    //       isChecked: [],
    //     },
    //   ]
    // });
  }
  useEffect(() => {
    fetchInitialValues();
  }, []);
  return (
    // TODO 模拟提交告警设置
    <ProForm
      style={{ paddingBottom: 70 }}
      submitter={{
        searchConfig: {
          submitText: '保存', // 在这里设置提交按钮文案
        },
      }}
      form={form}
      initialValues={props.currentRow}
      onFinish={async (values) => {
        console.log('onFinish_values', values);
        // postProjectCreateProject(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;
      }}
    >
      <ProFormGroup>
        <ProFormGroup title="通知方式" titleStyle={{ margin: '0 0 8px' }}>
          <ProFormList
            className="innerFormList_box"
            name={['ways']}
            creatorButtonProps={false}
            copyIconProps={false}
            deleteIconProps={false}
            style={{ padding: 0, margin: 0 }}
          >
            {(f, index, action) => {
              console.log('isChecked_value', f, index, action);
              return (
                <div className="form_checkBox_wrap">
                  <ProFormGroup key="group">
                    <ProFormCheckbox.Group
                      name="isChecked"
                      options={[
                        {
                          label: form.getFieldValue('ways')[index].label,
                          value: '1',
                        },
                      ]}
                    ></ProFormCheckbox.Group>
                    <ProFormDependency name={['isChecked']}>
                      {({ isChecked }) => {
                        console.log(isChecked, 'isChecked');
                        return (
                          <ProFormSelect
                            width={'lg'}
                            mode="multiple"
                            name="value"
                            debounceTime={1000}
                            disabled={!isChecked?.length}
                            request={async () => {
                              //   const resp = await postCurrentIP();
                              const resp = ['test001', 'test002', 'test003'];
                              return resp?.map((v: any) => {
                                return {
                                  label: v,
                                  value: v,
                                };
                              });
                            }}
                          />
                        );
                      }}
                    </ProFormDependency>
                  </ProFormGroup>
                </div>
              );
            }}
          </ProFormList>
        </ProFormGroup>
      </ProFormGroup>
      <ProFormGroup title="通知频次" titleStyle={{ margin: '0 0 8px' }}>
        <ProFormRadio.Group
          name="type"
          initialValue={props.values?.type || '0'}
          options={[
            {
              label: '每次',
              value: '0',
            },
            {
              label: '每天',
              value: '1',
            },
            {
              label: '每周',
              value: '2',
            },
            {
              label: '每月',
              value: '3',
            },
          ]}
        ></ProFormRadio.Group>
      </ProFormGroup>
    </ProForm>
  );
};

export default AlarmSetForm;
