import React, { useState } from "react";
import { Button, Form, FormGroup, Label, Input } from "reactstrap";
import styles from "./AddGuideForm.module.scss";

export function AddGuideForm({ actions }) {
  const { toggleAddFormModal, addGuide } = actions;

  const [formData, setFormData] = useState({
    title: "",
    description: "",
    url: "",
    image: "",
  });

  function handleChange({ target: { value, name } }) {
    setFormData({
      ...formData,
      [name]: value,
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    const guideData = {
      ...formData,
    };
    addGuide(guideData);
    toggleAddFormModal();
  }

  return (
    <div>
      <Form onSubmit={handleSubmit}>
        <FormGroup>
          <Label for="title">Title:</Label>
          <Input
            onChange={(event) => handleChange(event)}
            name="title"
            id="title"
            placeholder="Title"
          />
        </FormGroup>
        <FormGroup>
          <Label for="description">Description:</Label>
          <Input
            onChange={(event) => handleChange(event)}
            name="description"
            id="description"
            placeholder="Description"
          />
        </FormGroup>
        <FormGroup>
          <Label for="url">Web Link:</Label>
          <Input
            onChange={(event) => handleChange(event)}
            name="url"
            id="url"
            placeholder="URL"
          />
        </FormGroup>
        <FormGroup>
          <Label for="image">Image:</Label>
          <Input
            onChange={(event) => handleChange(event)}
            name="image"
            id="image"
            placeholder="Image URL"
          />
        </FormGroup>
        <Button className={styles.apply}>Apply</Button>
      </Form>
    </div>
  );
}
