import React, { useRef } from 'react';
import 'antd/es/form/style';
import 'antd/es/modal/style';
import 'antd/es/input/style';
import styles from './index.module.less';

import { Input, Form, Modal } from 'antd';
import { FormInstance } from 'antd/lib/form';
import { ILocalConfig, getLocalConfig, updateLocalConfig } from '../../../api';

const PORT_REGEX = /^\d{1,5}$/;
const IP_REGEX = /^(localhost)|(((2(5[0-5]|[0-4]\d))|[01]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[01]?\d{1,2})){3})$/;
const NPM_REGISTRY_REGEX = /^https?:\/\//; // 简单 URL 检查

const makeRules = (regex: RegExp, errTip: string) => {
  return [
    { required: true, message: '不能为空!' },
    {
      validator: (_: any, val: string) =>
        regex.test(val) ? Promise.resolve() : Promise.reject(errTip),
    },
  ];
};

interface IEditorModalProps {
  visible: boolean;
  onOk: () => void;
  onCancel: () => void;
}

const EditModal: React.FC<IEditorModalProps> = (props: IEditorModalProps) => {
  const { visible, onOk, onCancel } = props;
  const formRef = useRef<FormInstance>(null);

  // events
  const onClickOk = (): void => {
    if (formRef.current) {
      formRef.current
        .validateFields()
        .then((formValues) => {
          updateLocalConfig(formValues as ILocalConfig);
          onOk();
        })
        .catch((error) => {
          console.log(error.message);
        });
    }
  };

  return (
    <Modal
      className={styles.editModal}
      visible={visible}
      okText={'保存'}
      cancelText={'取消'}
      title={'配置'}
      onOk={onClickOk}
      onCancel={onCancel}
    >
      <Form
        ref={formRef}
        labelCol={{ span: 6 }}
        labelAlign="right"
        initialValues={getLocalConfig()}
      >
        <Form.Item
          label={'本地连接 IP'}
          name={'ip'}
          rules={makeRules(IP_REGEX, 'IP格式不合法')}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'本地连接端口'}
          name={'port'}
          rules={makeRules(PORT_REGEX, '端口格式不合法')}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={'NPM 源'}
          name={'npmRegistry'}
          rules={makeRules(NPM_REGISTRY_REGEX, 'NPM 源地址不合法')}
        >
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditModal;