import React, { useState, useEffect } from "react"
import PropTypes from "prop-types"

import { FormModal } from "../forms/modal"
import { FormInput } from "../forms/input"

export const PolochonEdit = ({
  show,
  setShow,
  id,
  title,
  icon,
  initialName,
  initialUrl,
  initialToken,
  update,
}) => {
  const [name, setName] = useState(initialName);
  const [url, setUrl] = useState(initialUrl);
  const [token, setToken] = useState(initialToken);

  useEffect(() => {
    setName(initialName);
    setUrl(initialUrl);
    setToken(initialToken);
  }, [id, initialName, initialUrl, initialToken])

  const handleSubmit = () => {
    update({ id, name, url, token });
    setShow(false);
  };

  return (
    <FormModal
      show={show}
      setShow={setShow}
      title={title}
      icon={icon}
      handleSubmit={handleSubmit}
    >
      <FormInput label="Name" value={name} updateValue={setName} />
      <FormInput label="URL" value={url} updateValue={setUrl} />
      <FormInput label="Token" value={token} updateValue={setToken} />
    </FormModal>
  )
}
PolochonEdit.propTypes = {
  show: PropTypes.bool,
  title: PropTypes.string,
  icon: PropTypes.string,
  setShow: PropTypes.func,
  update: PropTypes.func,
  id: PropTypes.string,
  initialName: PropTypes.string,
  initialUrl: PropTypes.string,
  initialToken: PropTypes.string,
};
PolochonEdit.defaultProps = {
  id: "",
  title: "Edit",
  icon: "edit",
  initialName: "",
  initialUrl: "",
  initialToken: "",
};