import React, { useState, useEffect } from "react";

import {
  Skeleton,
  Typography,
  Space,
  message,
  Form,
  Input,
  Select,
} from "antd";

import { Button } from "./../../../../lib";

const { Title } = Typography;

const ModalAdd = ({
  model,
  edit,
  history,
  formContent,
  match,
  config,
  callback,
  ...props
}) => {
  const [loading, setLoading] = useState(true);

  const [form] = Form.useForm();

  const [pages, setPages] = useState([]);

  const [models, setModels] = useState([]);

  const [body, setBody] = useState(formContent);

  useEffect(() => {
    setLoading(false);
  }, []);

  /**
   * Submit values
   */
  const onSubmit = (values) => {
    setLoading(true);

    if (formContent && formContent.id) {
      // Update of model
      model.update({ id, values }).then(() => {
        // callback();
        message.success("Modal Updated");

        setLoading(false);

        callback();
      });
    } else {
      // add new model
      model.add({ values }).then(() => {
        // callback();
        message.success("Modal Added");

        setLoading(false);

        callback();
      });
    }
  };

  return (
    <section className="collection-add">
      <Title level={4}>{edit ? "Edit" : "Add"} Modal</Title>

      {loading ? (
        <Skeleton />
      ) : (
        <Form
          initialValues={{ ...body }}
          form={form}
          layout="vertical"
          onFinish={onSubmit}
        >
          {/* Name */}
          <Form.Item name={"name"} label="Name" required>
            <Input placeholder="Enter name" />
          </Form.Item>
          {/* Name Ends */}

          {/* Description */}
          <Form.Item name={"description"} label="Description">
            <Input placeholder="Enter Description" />
          </Form.Item>
          {/* Description Ends */}

          {/** Table Name start */}

          <Form.Item name={"table_name"} label="Table Name">
            <Input placeholder="Enter table Name" />
          </Form.Item>
          {/** Table Name ends */}

          {/** Route Name Start */}

          <Form.Item name={"router_name"} label="Router Name">
            <Input placeholder="Enter Router Name" />
          </Form.Item>
          {/** Route Name Ends */}

          <Form.Item>
            <Button loading={loading} htmlType={"submit"} type="primary">
              Submit
            </Button>
          </Form.Item>
        </Form>
      )}
    </section>
  );
};

export default ModalAdd;
