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

export function Edit({ data, actions }) {
  const { selectedGuide } = data;
  const {
    description: currentDescription,
    id,
    title: currentTitle,
    url: currentUrl,
    image: currentImage,
  } = selectedGuide;
  const { toggleEdit, updateGuide } = actions;

  const [formData, setFormData] = useState({
    title: currentTitle,
    description: currentDescription,
    url: currentUrl,
    image: currentImage,
  });

  const { title, description, url, image } = formData;

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

  function handleSubmit(event) {
    event.preventDefault();
    const guideData = {
      ...formData,
      id,
    };
    updateGuide(guideData);
    toggleEdit();
  }

  return (
    <div>
      <div>
        <Form onSubmit={handleSubmit}>
          <FormGroup>
            <Label for="exampleTitle">Title:</Label>
            <Input
              value={title}
              onChange={(event) => handleChange(event)}
              type="title"
              name="title"
              id="exampleTitle"
              placeholder={currentTitle}
            />
          </FormGroup>
          <FormGroup>
            <Label for="exampleDescription">Description:</Label>
            <Input
              value={description}
              onChange={(event) => handleChange(event)}
              type="description"
              name="description"
              id="exampleDescription"
              placeholder={currentDescription}
            />
          </FormGroup>
          <FormGroup>
            <Label for="exampleWebLink">Web Link:</Label>
            <Input
              value={url}
              onChange={(event) => handleChange(event)}
              name="url"
              id="exampleWebLink"
              placeholder={currentUrl}
            />
          </FormGroup>
          <FormGroup>
            <Label for="image">Image:</Label>
            <Input
              value={image}
              onChange={(event) => handleChange(event)}
              name="image"
              id="image"
              placeholder={image}
            />
            {/* <div class="file-upload-wrapper">
              <input
                value={image}
                onChange={(event) => handleChange(event)}
                type="file"
                id="input-file-now-custom-1"
                className="file-upload"
                data-default-file="https://mdbootstrap.com/img/Photos/Others/images/89.jpg"
                name="image"
              />
            </div> */}
          </FormGroup>
          <Button className={styles.apply}>Apply</Button>
        </Form>
      </div>
    </div>
  );
}
