import { Create, useForm, useSelect } from "@refinedev/antd";
import { Form, Input, Select, InputNumber, Divider } from "antd";
import { DeploymentFormData, Environment } from "../../types/deployment";

export const DeploymentCreate = () => {
  const { formProps, saveButtonProps } = useForm<DeploymentFormData>({});

  const { selectProps: clientSelectProps } = useSelect({
    resource: "clients",
  });

  const { selectProps: blueprintSelectProps } = useSelect({
    resource: "blueprints",
  });

  return (
    <Create saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label={"Deployment Name"}
          name="name"
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={"Client"}
          name="clientId"
          rules={[{ required: true }]}
        >
          <Select {...clientSelectProps} placeholder="Select client" />
        </Form.Item>

        <Form.Item
          label={"Blueprint"}
          name="blueprintId"
          rules={[{ required: true }]}
        >
          <Select {...blueprintSelectProps} placeholder="Select blueprint" />
        </Form.Item>

        <Divider>Configuration</Divider>

        <Form.Item
          label={"Version"}
          name="version"
          initialValue={"1.0.0"}
          rules={[{ required: true }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label={"Container Instances"}
          name="containerCount"
          initialValue={1}
          rules={[{ required: true }]}
        >
          <InputNumber min={1} max={10} />
        </Form.Item>

        <Form.Item
          label={"Environment"}
          name="environment"
          initialValue={"production"}
          rules={[{ required: true }]}
        >
          <Select
            options={[
              { value: "development", label: "Development" },
              { value: "staging", label: "Staging" },
              { value: "production", label: "Production" },
            ]}
          />
        </Form.Item>
      </Form>
    </Create>
  );
};