"use client";

import React, { useState, useRef } from "react";
import Nav from "@/components/Nav";
import Footer from "@/components/Footer";
import styles from "./contact.module.scss";
import { addContact } from "@/lib/contact";
import { ProForm, ProFormInstance } from "@ant-design/pro-components";
import { Form, Input, Modal } from "antd";

const Contact: React.FC = () => {
  const formRef = useRef<ProFormInstance>(null);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },
  };

  const { TextArea } = Input;

  return (
    <div className={styles.container}>
      <Nav title={"联系我们"} />
      <div className={styles.title}>与咨询顾问沟通</div>
      <div className={styles.subTitle}>我们如何帮助您的组织，填写表格以联系顾问</div>
      <ProForm
        formRef={formRef}
        className={styles.form}
        layout={"horizontal"}
        {...formItemLayout}
        submitter={{
          render: () => {
            return <></>;
          },
        }}
        onFinish={async (values) => {
          addContact({ ...values }).then((response) => {
            if (response.code == 200) {
              showModal();
              formRef?.current?.resetFields();
            }
          });
        }}
      >
        <Form.Item
          label={<span className={styles.formItemLabel}>姓名</span>}
          name="name"
          rules={[{ required: true, message: "请输入姓名" }, { max: 20 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入姓名" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>公司邮箱</span>}
          name="email"
          rules={[
            {
              required: true,
              message: "请输入公司邮箱",
            },
            { max: 100 },
            {
              pattern: /^[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/,
              message: "邮箱格式错误",
            },
          ]}
        >
          <Input className={styles.formItemInput} placeholder="请输入公司邮箱" />
        </Form.Item>
        <Form.Item
          label={<span className={styles.formItemLabel}>公司名称</span>}
          name="company"
          rules={[{ required: true, message: "请输入公司名称" }, { max: 100 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入公司名称" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>职位</span>}
          name="position"
          rules={[{ required: true, message: "请输入职位" }, { max: 20 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入职位" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>电话号码</span>}
          name="phone"
          rules={[{ required: true, message: "请输入电话号码" }, { max: 20 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入电话号码" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>地区</span>}
          name="erea"
          rules={[{ required: true, message: "请输入地区" }, { max: 20 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入地区" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>城市</span>}
          name="city"
          rules={[{ required: true, message: "请输入城市" }, { max: 20 }]}
        >
          <Input className={styles.formItemInput} placeholder="请输入城市" />
        </Form.Item>

        <Form.Item
          label={<span className={styles.formItemLabel}>需求</span>}
          name="userRemark"
          rules={[{ required: true, message: "请输入需求" }, { max: 255 }]}
        >
          <TextArea className={styles.formItemInputArea} placeholder="请输入需求" />
        </Form.Item>

        <div
          className={styles.submit}
          onClick={() => {
            formRef.current?.submit();
          }}
        >
          提交
        </div>
      </ProForm>
      <Modal title="提交成功" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}></Modal>
      <Footer />
    </div>
  );
};
export default Contact;
