Untitled

/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable @next/next/no-img-element */
/* eslint-disable react-hooks/rules-of-hooks */
import React, {useState} from 'react'
import { collection, addDoc } from 'firebase/firestore';
import { db, storage, storageRef  } from '../src/config/firebase.config'
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';
import ImageUpload from '../components/ImageUpload'
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';

function newJob() {
  const [value, setValue] = useState('');
  const [newClient, setNewClient] = useState("");
  const [newContact, setNewContact] = useState(0);
  const [newDesc, setNewDesc] = useState("");
  const [image, setImage] = useState(null);

  
  const handleChange = e => {
      if(e.target.files[0]) {
          setImage(e.target.files[0]);
      }
  }

  const handleUpload = () => {
    const ref = storage.ref(`/images/${image.name}`);
    const uploadTask = ref.put(image);
    uploadTask.on("state_changed", console.log, console.error, () => {
      getRef
        .getDownloadURL()
        .then((url) => {
          setFile(null);
          setURL(url);
        });
    });

  }

  const jobsCollectionRef = collection(db, "jobs");

  const createJob = async () => {
    
    await addDoc(jobsCollectionRef, { 
      client: newClient, 
      contact: Number(newContact), 
      description: newDesc
     });
    window.location.pathname="/jobs";
  }
  return (
    <div className='wrapper'>
      <div>
        <h1>Job Information</h1>
        <hr/>
      </div>
      
      <label>Upload Cover Photo</label>
      <div style={{width:"100%",marginBottom:"15px",marginTop:"15px"}}>
        <ImageUpload image={image} handleChange={handleChange} handleUpload={handleUpload} />
      </div>
      
      <hr />
      <label>Client</label>
      <input type="text" onChange={(event) => {setNewClient(event.target.value)}} placeholder="Client.."/>
      <label>Contact</label>
      <input type="tel" placeholder="Contact.." onChange={(event) => {setNewContact(event.target.value)}}/>
      <label>Template</label>
      <select>
        <option>Sample Template</option>
      </select>
      <label>Description</label>
      <ReactQuill value={newDesc} onChange={setNewDesc}/>
      <button type="submit" onClick={createJob}>Save</button>
      
      <style jsx>{`
        .wrapper {
          padding: 15px 0;
        }
        input {
          width: 100%;
          margin-bottom: 15px;
        }

        select {
          margin-bottom: 15px;
          width: 100%;
        }
      `}</style>
    </div>
  )
}

export default newJob