import React from "react";
import api from "../api.js";
import {useState, useEffect} from "react";

export default function ProjectCreateModal({loc}) {
    const modalId = `modal-${loc.id.replace(/\s+/g, '-')}`;
    const [notes, setNotes] = useState('');
    const [showSecondVisit, setShowSecondVisit] = useState(false);
    const [teamMembers, setTeamMembers] = useState([]);

    useEffect(() => {
        const fetchTeamMembers = async () => {
            try {
                const response = await api.get('team/');
                if (response.status === 200) {
                    setTeamMembers(response.data);
                }
            } catch (error) {
                console.error('Error fetching team members:', error);
            }
        };
        fetchTeamMembers();
    }, []);

    const handleNotes = (e) => {
        setNotes(e.target.value);
    }
    const [start1, setStart1] = useState('');
    const handleStart1 = (e) => {
        setStart1(e.target.value);
    }
    const [end1, setEnd1] = useState('');
    const handleEnd1 = (e) => {
        setEnd1(e.target.value);
    }
    const [serviceType, setServiceType] = useState('');
    const handleServiceType = (e) => {
        setServiceType(e.target.value);
    }
    const [secondVisit, setSecondVisit] = useState('');
    const handleSecondVisit = (e) => {
        setShowSecondVisit(e.target.value === 'Yes');
        setSecondVisit(e.target.value);
    }
    const [start2, setStart2] = useState('');
    const handleStart2 = (e) => {
        setStart2(e.target.value);
    }
    const [end2, setEnd2] = useState('');
    const handleEnd2 = (e) => {
        setEnd2(e.target.value);
    }
    const [attendees, setAttendees] = useState([]);
    const handleAttendees = (e) => {
        const attendee = (e.target.value);
        if (e.target.checked) {
            setAttendees([...attendees, attendee]);
        } else {
            setAttendees(attendees.filter(a => a !== attendee));
        }
    }
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await api.post('calendar/', {
                id: loc.id,
                store: loc.store,
                summary: `#${loc.store} - ${loc.city}: ${serviceType}`,
                description: `${serviceType} : ${notes}`,
                location: `${loc.street_address}, ${loc.city}, ${loc.state} ${loc.zip_code}`,
                start1: start1,
                end1: end1,
                serviceType: serviceType,
                secondVisit: secondVisit,
                start2: start2,
                end2: end2,
                attendees: attendees,
            });
            if (response.status === 200) {
                onSuccess()
            }
        } catch (error) {
            alert(error.detail);
        }
    }
    const onSuccess = () => {
        alert('Project created and calendar invites sent!');
        window.location.reload();
    }

    return (
        <div>
            <button type="button" className="btn btn-primary m-3" data-bs-toggle="modal"
                    data-bs-target={`#${modalId}`}>
                Schedule Service
            </button>
            <div className='modal fade' id={modalId} data-bs-backdrop="static"
                 data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h1 className="modal-title fs-5" id="staticBackdropLabel">
                                Create a New Service Instance
                            </h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <p>Store ID: {loc.id}</p>
                            <p>Store #: {loc.store} - {loc.city}</p>
                            <form>
                                <div className="mb-3">
                                    <label htmlFor="start-1" className="form-label">
                                        Start Date & Time
                                    </label>
                                    <input onChange={handleStart1} id="start-1" type="datetime-local" className="form-control" required></input>
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="end-1" className="form-label">
                                        End Date & Time
                                    </label>
                                    <input onChange={handleEnd1} id="end-1" type="datetime-local" className="form-control" required></input>
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="service-type" className="form-label">
                                        Select a Service Type
                                    </label>
                                    <select onChange={handleServiceType} id="service-type" className="form-select" aria-label="Service type selection" required>
                                        <option defaultValue>
                                            Select service type...
                                        </option>
                                        <option value="Regular Service">
                                            Regular Service
                                        </option>
                                        <option value="Deep Clean">
                                            Deep Clean
                                        </option>
                                        <option value="Other">
                                            Other - Please add notes
                                        </option>
                                    </select>
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="second-visit" className="form-label">
                                        Second Visit Required?
                                    </label>
                                    <select id="second-visit" className="form-select" aria-label="Second visit selection"
                                            onChange={handleSecondVisit} required>
                                        <option defaultValue value="No">
                                            No
                                        </option>
                                        <option value="Yes">
                                            Yes
                                        </option>
                                    </select>
                                </div>
                                <div className="mb-3" id="second-start" style={{ display: showSecondVisit ? "block" : "none" }}>
                                    <label htmlFor="start-2" className="form-label">
                                        Second Visit Start Date & Time
                                    </label>
                                    <input onChange={handleStart2} id="start-2" type="datetime-local" className="form-control"></input>
                                </div>
                                <div className="mb-3" id="second-end" style={{ display: showSecondVisit ? "block" : "none" }}>
                                    <label htmlFor="end-2" className="form-label">
                                        Second Visit End Date & Time
                                    </label>
                                    <input onChange={handleEnd2} id="end-2" type="datetime-local" className="form-control"></input>
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="notes" className="form-label">
                                        Notes
                                    </label>
                                    <textarea onChange={handleNotes} id="notes" className="form-control" rows="3"></textarea>
                                </div>
                                <div className="mb-3">
                                    <label htmlFor="team-members" className="form-check-label">
                                        Select Team Members:
                                    </label>
                                    <div id="team-members" className="mb-3">
                                        {teamMembers.map((member, index) => (
                                            <div key={index} className="form-check form-check-inline">
                                                <input className="form-check-input" type="checkbox" id={`checkbox-${member.username}`}
                                                       onChange={handleAttendees} value={member.username}/>
                                                <label className="form-check-label" htmlFor={`checkbox-${member.username}`}>
                                                    {member.display_name || member.username}
                                                </label>
                                            </div>
                                        ))}
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-secondary"
                                    data-bs-dismiss="modal">Cancel
                            </button>
                            <button onClick={handleSubmit} type="button" className="btn btn-primary" data-bs-dismiss="modal">
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}