import React, { useState } from "react";
import Form from "react-bootstrap/Form";
import Footer from "../components/Footer";
import Header from "../components/Header";
import Button from "react-bootstrap/Button";
import axios from "axios";
import Cookies from "js-cookie";
import Dropdown from 'react-bootstrap/Dropdown';
export default function Upload() {

  const [selectedData, setSelectedData] = useState("")
  const [formData, setFormData] = useState({
    product_name: "",
    category: selectedData,
    price: "",
    description: "",
    images: null,
    userID: Cookies.get("userID")
  });
  const handleSelected = (e)=>{
    setSelectedData(e);
    setFormData({...formData, ['category']: e});
  }
  function handleData(event) {
    const key = event.target.name;
    const val = event.target.value;
    setFormData({ ...formData, [key]: val });
    console.log("data is ", val);
  }
  function handleFile(event) {
    const key = event.target.name;
    const val = event.target.files[0];
    setFormData({ ...formData, [key]: val });
    console.log("data is ", val);
  }
  const uploadStyle = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  };

  const uploadFormStyle = {
    border: "0.5px solid grey",
    borderRadius: "10px",
    padding: "5vh",
  };

  function uploadSubmit(event) {
    event.preventDefault();
    console.log("Give me form data: ", formData)

    axios
      .post("http://localhost:3000/item/add", formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then((response) => {
        console.log("response data", response.data);
        Cookies.set("name", response.data.userName, { expires: 7 });
        console.log("Give me cookies username", Cookies.get("name"));
        console.log("Form submitted successfully");
      })
      .catch((error) => {
        console.error("Form submission error", error);
      });
  }
  return (
    <div>
      <Header />
      <main style={uploadStyle}>
        <div>
          <Form style={uploadFormStyle} onSubmit={uploadSubmit}>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Product Name</Form.Label>
              <Form.Control
                name="product_name"
                type="text"
                placeholder=""
                onChange={handleData}
              />
            </Form.Group>
            <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
              <Form.Label>Price</Form.Label>
              <Form.Control
                name="price"
                type="text"
                placeholder=""
                onChange={handleData}
              />
            </Form.Group>

            <Dropdown onSelect={handleSelected} className="mb-3">
              <Dropdown.Toggle variant="success" id="dropdown-basic">
                {selectedData || "select category"}
              </Dropdown.Toggle>

              <Dropdown.Menu>
                <Dropdown.Item eventKey="book">book</Dropdown.Item>
                <Dropdown.Item eventKey="furniture">furniture</Dropdown.Item>
                <Dropdown.Item eventKey="electronics">electronics</Dropdown.Item>
                <Dropdown.Item eventKey="clothes">clothes</Dropdown.Item>
                <Dropdown.Item eventKey="tool">tool</Dropdown.Item>
                <Dropdown.Item eventKey="other">other</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
            <Form.Group
              className="mb-3"
              controlId="exampleForm.ControlTextarea1">
              <Form.Label>Description</Form.Label>
              <Form.Control
                name="description"
                onChange={handleData}
                as="textarea"
                rows={10}
              />
            </Form.Group>
            <Form.Group controlId="formFileSm" className="mb-3">
              <Form.Label>Product Image Upload</Form.Label>
              <Form.Control
                name="images"
                onChange={handleFile}
                type="file"
                size="sm"
              />
            </Form.Group>
            <Button
              style={{ marginLeft: "15vh", marginTop: "2vh" }}
              variant="outline-primary"
              type="submit">
              Submit
            </Button>
          </Form>
        </div>
      </main>
      <Footer />
    </div>
  );
}
