import axios from 'axios';
import React,{useState,useEffect,useContext} from 'react'
import { Button, Header, Image, Form, Modal } from 'semantic-ui-react'

const EditStore=({openingModal}) => {
  const [open, openCreateModal] = React.useState(true);

const id = openingModal.id
const [name, setName] = useState(openingModal.name);
const [address, setAddress] = useState(openingModal.address);

// to pass data from main onto modal

useEffect(()=>{
  setName(name)
  setAddress(address)
},[name,address]
)

// to fetch data from SQL server
  const fetchStore=()=>{
    axios
    .get("/Stores/GetStore") 
    .then(({data})=> {
        console.log(data);
        this.setState({
            store2:data,
        });
    })
    .catch((err)=>{
        console.log(err);
    });
};

const editStore = ()=>{
  axios.put(("Stores/PutStore"), {
    Name: name,
    Address: address
  })
  .then(res=>{
    openCreateModal(false);
    setName("");
    setAddress("");
    fetchStore();
  })
  .catch(err=>{
    alert(err);
  })
}

  return (
    <Modal
      open={open}
    >
      <Modal.Header>Edit Store</Modal.Header>
        <Modal.Content>
        <Modal.Description>
          <Form>
    <Form.Field>
      <label>Name</label>
      <input value= {name} onChange={(e) => setName(e.target.value)}/>
    </Form.Field>
    <Form.Field>
      <label>Address</label>
      <input value={address} onChange={(e) => setAddress(e.target.value)}/>
    </Form.Field>
  </Form>
        </Modal.Description>
      </Modal.Content>
      <Modal.Actions>
        <Button color='black' onClick={() => openingModal (false)}>Cancel</Button>
        <Button color="green" onClick={editStore}>Edit</Button>
      </Modal.Actions>
    </Modal>
  )
}

export default EditStore