import React, { useState, useEffect } from "react";
import { Form, Input, InputNumber, Button, Select, DatePicker } from "antd";
import axios from "axios";

const { TextArea } = Input;
const { Option } = Select;
const dateFormat = "YYYY-MM-DD";

export const FormCreateItem = ({ onClose }) => {
  const [form] = Form.useForm();
  const [rooms, setRooms] = useState([]);

  useEffect(() => {
    const fetchRooms = async () => {
      try {
        const response = await axios.get(
          `${import.meta.env.VITE_API_URL}/room`,
        );
        setRooms(response.data);
      } catch (error) {
        console.error(error);
      }
    };

    fetchRooms();
  }, []);

  const onFinish = async (values) => {
    try {
      const response = await axios.post(
        `${import.meta.env.VITE_API_URL}/item`,
        values,
      );
      console.log(response.data);

    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <h1>Create Item</h1>
      <Form.Item label="Brand" name="brand">
        <Input />
      </Form.Item>
      <Form.Item label="Model" name="model">
        <Input />
      </Form.Item>
      <Form.Item label="Room" name="room">
        <Select placeholder="Select a room">
          {rooms.map((room) => (
            <Option key={room._id} value={room._id}>
              {room.name}
            </Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item label="Price" name="price">
        <InputNumber />
      </Form.Item>
      <Form.Item label="Purchase Date" name="purchaseDate">
        <DatePicker format={dateFormat} />
      </Form.Item>
      <Form.Item label="Description" name="description">
        <TextArea rows={4} />
      </Form.Item>
      <Form.Item label="Link" name="link">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default FormCreateItem;