SMATEC-FRONTEND/src/pages/Manager/Device/Camera/components/CameraFormModal.tsx

import {
  Button,
  Col,
  Form,
  Input,
  InputNumber,
  Modal,
  Row,
  Select,
} from 'antd';

// Camera types
const CAMERA_TYPES = [
  { label: 'HIKVISION', value: 'HIKVISION' },
  { label: 'DAHUA', value: 'DAHUA' },
  { label: 'GENERIC', value: 'GENERIC' },
];

interface CameraFormValues {
  name: string;
  type: string;
  account: string;
  password: string;
  ipAddress: string;
  rtspPort: number;
  httpPort: number;
  stream: number;
  channel: number;
}

interface CameraFormModalProps {
  open: boolean;
  onCancel: () => void;
  onSubmit: (values: CameraFormValues) => void;
}

const CameraFormModal: React.FC<CameraFormModalProps> = ({
  open,
  onCancel,
  onSubmit,
}) => {
  const [form] = Form.useForm<CameraFormValues>();

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      onSubmit(values);
      form.resetFields();
    } catch (error) {
      console.error('Validation failed:', error);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <Modal
      title="Tạo mới camera"
      open={open}
      onCancel={handleCancel}
      footer={[
        <Button key="cancel" onClick={handleCancel}>
          Hủy
        </Button>,
        <Button key="submit" type="primary" onClick={handleSubmit}>
          Đồng ý
        </Button>,
      ]}
      width={500}
    >
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          type: 'HIKVISION',
          rtspPort: 554,
          httpPort: 80,
          stream: 0,
          channel: 0,
        }}
      >
        <Form.Item
          label="Tên"
          name="name"
          rules={[{ required: true, message: 'Vui lòng nhập tên' }]}
        >
          <Input placeholder="nhập dữ liệu" />
        </Form.Item>

        <Form.Item
          label="Loại"
          name="type"
          rules={[{ required: true, message: 'Vui lòng chọn loại' }]}
        >
          <Select options={CAMERA_TYPES} />
        </Form.Item>

        <Form.Item
          label="Tài khoản"
          name="account"
          rules={[{ required: true, message: 'Vui lòng nhập tài khoản' }]}
        >
          <Input placeholder="nhập tài khoản" autoComplete="off" />
        </Form.Item>

        <Form.Item
          label="Mật khẩu"
          name="password"
          rules={[{ required: true, message: 'Vui lòng nhập mật khẩu' }]}
        >
          <Input.Password
            placeholder="nhập mật khẩu"
            autoComplete="new-password"
          />
        </Form.Item>

        <Form.Item
          label="Địa chỉ IP"
          name="ipAddress"
          rules={[{ required: true, message: 'Vui lòng nhập địa chỉ IP' }]}
        >
          <Input placeholder="192.168.1.10" />
        </Form.Item>

        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="Cổng RTSP"
              name="rtspPort"
              rules={[{ required: true, message: 'Vui lòng nhập cổng RTSP' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="Cổng HTTP"
              name="httpPort"
              rules={[{ required: true, message: 'Vui lòng nhập cổng HTTP' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} max={65535} />
            </Form.Item>
          </Col>
        </Row>

        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              label="Luồng"
              name="stream"
              rules={[{ required: true, message: 'Vui lòng nhập luồng' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              label="Kênh"
              name="channel"
              rules={[{ required: true, message: 'Vui lòng nhập kênh' }]}
            >
              <InputNumber style={{ width: '100%' }} min={0} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default CameraFormModal;