import React, { useState } from "react";
import {
  Form,
  Input,
  Modal,
  Select,
  InputNumber,
  Row,
  Col,
  Typography,
} from "antd";
import { useStore } from "../../utils/useStore";

const { Title, Text } = Typography;
export const MembershipModal = ({
  visible,
  onCreate,
  onCancel,
  initialData,
}) => {
  const [form] = Form.useForm();
  const { Option } = Select;
  const store = useStore();
  const [value, setValue] = useState();

  return (
    <Modal
      visible={visible}
      title={
        initialData.isChangePassword
          ? "Change Member Password"
          : initialData.id
          ? "Edit Member"
          : "Create a new Membership"
      }
      okText={initialData.id ? "Edit" : "Create"}
      cancelText="Cancel"
      onCancel={() => {
        form.resetFields();
        onCancel();
      }}
      onOk={() => {
        form
          .validateFields()
          .then((values) => {
            onCreate(values);
            form.resetFields();
          })
          .catch((info) => {
            console.log("Validate Failed:", info);
          });
      }}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={initialData}
      >
        {((initialData.id && !initialData.isChangePassword) ||
          !initialData.id) && (
          <Form.Item
            name="name"
            label="Name"
            rules={[{ required: true, message: "Please input Name!" }]}
          >
            <Input />
          </Form.Item>
        )}
        {!initialData.id && (
          <Form.Item
            name="username"
            label="Username"
            rules={[{ required: true, message: "Please input Username!" }]}
          >
            <Input />
          </Form.Item>
        )}
        {((initialData.id && initialData.isChangePassword) ||
          !initialData.id) && (
          <Form.Item
            name="password"
            label="Password"
            rules={[{ required: false, message: "Please input password!" }]}
          >
            <Input.Password />
          </Form.Item>
        )}
        {((initialData.id && !initialData.isChangePassword) ||
          !initialData.id) && (
          <Form.Item
            name="phone_number"
            label="Phone Number"
            rules={[
              {
                required: true,
                message: "Please input Phone Number!",
              },
              {
                pattern: /^(?:\d*)$/,
                message: "Phone number should contain just number",
              },
              {
                //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
                pattern: /^[\d]{2,12}$/,
                message: "Phone number should be less than 12 character",
              },
            ]}
          >
            <Input
              onChange={(value) => {
                setValue(value);
              }}
            />
          </Form.Item>
        )}
        {((initialData.id && !initialData.isChangePassword) ||
          !initialData.id) && (
          <Form.Item
            name="roleId"
            label="Role"
            rules={[{ required: true, message: "Please input role id!" }]}
          >
            <Select>
              {store.role.data.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select>
          </Form.Item>
        )}
      </Form>
    </Modal>
  );
};