import {
  Form,
  Input,
  Button,
} from "antd";
import { Create, useForm } from "@refinedev/antd";
import { Card } from "antd";
import { ClientFormData } from "../../types/client";

export const ClientCreate = () => {
  const { formProps, saveButtonProps, form } = useForm<ClientFormData>({
    redirect: "list",
    onMutationSuccess: (data) => {
      console.log("Client created successfully:", data);
    },
    onMutationError: (error) => {
      console.error("Error creating client:", error);
    },
  });

  const fillTestData = () => {
    form?.setFieldsValue({
      name: "Test Client",
      contactEmail: "test@example.com", 
      organization: "Test Organization"
    });
  };

  return (
    <Create 
      saveButtonProps={saveButtonProps}
      headerButtons={[
        <Button key="test-data" onClick={fillTestData} type="dashed">
          Fill Test Data
        </Button>
      ]}
    >
      <Form {...formProps} layout="vertical">
        <Card title="Client Information">
          <Form.Item
            label="Name"
            name="name"
            rules={[
              {
                required: true,
                message: "Please enter client name",
              },
            ]}
          >
            <Input placeholder="Client name" />
          </Form.Item>

          <Form.Item
            label="Contact Email"
            name="contactEmail"
            rules={[
              {
                required: true,
                type: "email",
                message: "Please enter a valid email address",
              },
            ]}
          >
            <Input placeholder="contact@example.com" />
          </Form.Item>

          <Form.Item
            label="Organization"
            name="organization"
            rules={[
              {
                required: true,
                message: "Please enter organization name",
              },
            ]}
          >
            <Input placeholder="Organization name" />
          </Form.Item>
        </Card>
      </Form>
    </Create>
  );
};