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

export default function ProjectPunchlistModal({proj}) {
    // Form data states
    const [ceilingTilesService, setCeilingTilesService] = useState(false);
    const handleSetCeilingTilesService = (e) => {
        setCeilingTilesService(e.target.value);
    }
    const [ceilingVentsService, setCeilingVentsService] = useState(false);
    const handleSetCeilingVentsService = (e) => {
        setCeilingVentsService(e.target.value);
    }
    const [ceilingVentsWaiting, setCeilingVentsWaiting] = useState(false);
    const handleSetCeilingVentsWaiting = (e) => {
        setCeilingVentsWaiting(e.target.value);
    }
    const [posService, setPosService] = useState(false);
    const handleSetPosService = (e) => {
        setPosService(e.target.value);
    }
    const [serviceCounter, setServiceCounter] = useState(false);
    const handleSetServiceCounter = (e) => {
        setServiceCounter(e.target.value);
    }
    const [oven, setOven] = useState('');
    const handleSetOven = (e) => {
        setOven(e.target.value);
    }
    const [ovenDisassembled, setOvenDisassembled] = useState(false);
    const handleSetOvenDisassembled = (e) => {
        setOvenDisassembled(e.target.value);
    }
    const [ovenReassembled, setOvenReassembled] = useState(false);
    const handleSetOvenReassembled = (e) => {
        setOvenReassembled(e.target.value);
    }
    const [ovenAlerts, setOvenAlerts] = useState(false);
    const handleSetOvenAlerts = (e) => {
        setOvenAlerts(e.target.value);
    }
    const [ovenExterior, setOvenExterior] = useState(false);
    const handleSetOvenExterior = (e) => {
        setOvenExterior(e.target.value);
    }
    const [walls, setWalls] = useState(false)
    const handleSetWalls = (e) => {
        setWalls(e.target.value);
    }
    const [posWall, setPosWall] = useState(false);
    const handleSetPosWall = (e) => {
        setPosWall(e.target.value);
    }
    const [ceilingTilesPrep,setCeilingTilesPrep] = useState(false);
    const handleSetCeilingTilesPrep = (e) => {
        setCeilingTilesPrep(e.target.value);
    }
    const [ceilingVentsPrep,setCeilingVentsPrep] = useState(false);
    const handleSetCeilingVentsPrep = (e) => {
        setCeilingVentsPrep(e.target.value);
    }
    const [quarryTile, setQuarryTile] = useState(false);
    const handleSetQuarryTile = (e) => {
        setQuarryTile(e.target.value);
    }
    const [cutTable, setCutTable] = useState(false);
    const handleSetCutTable = (e) => {
        setCutTable(e.target.value);
    }
    const [makeLine,setMakeLine] = useState(false);
    const handleSetMakeLine = (e) => {
        setMakeLine(e.target.value);
    }
    const [subLine, setSubLine] = useState(false);
    const handleSetSubLine = (e) => {
        setSubLine(e.target.value);
    }
    const [hotBoxes, setHotBoxes] = useState(false);
    const handleSetHotBoxes = (e) => {
        setHotBoxes(e.target.value);
    }
    const [doughPrep, setDoughPrep] = useState(false);
    const handleSetDoughPrep = (e) => {
        setDoughPrep(e.target.value);
    }
    const [posDelivery, setPosDelivery] = useState(false);
    const handleSetPosDelivery = (e) => {
        setPosDelivery(e.target.value);
    }
    const [managerStation, setManagerStation] = useState(false);
    const handleSetManagerStation = (e) => {
        setManagerStation(e.target.value);
    }
    const [handSinks, setHandSinks] = useState(false);
    const handleSetHandSinks = (e) => {
        setHandSinks(e.target.value);
    }
    const [dispensers, setDispensers] = useState(false);
    const handleSetDispensers = (e) => {
        setDispensers(e.target.value);
    }
    const [otherEquipment, setOtherEquipment] = useState(false);
    const handleSetOtherEquipment = (e) => {
        setOtherEquipment(e.target.value);
    }
    const [ceilingTilesBack, setCeilingTilesBack] = useState(false);
    const handleSetCeilingTilesBack = (e) => {
        setCeilingTilesBack(e.target.value);
    }
    const [ceilingVentsBack, setCeilingVentsBack] = useState(false);
    const handleSetCeilingVentsBack = (e) => {
        setCeilingVentsBack(e.target.value);
    }
    const [trash, setTrash] = useState(false);
    const handleSetTrash = (e) => {
        setTrash(e.target.value);
    }
    const [cleanup, setCleanup] = useState(false);
    const handleSetCleanup = (e) => {
        setCleanup(e.target.value);
    }
    const [alarm, setAlarm] = useState(false);
    const handleSetAlarm = (e) => {
        setAlarm(e.target.value);
    }
    const [notes, setNotes] = useState("");
    const handleSetNotes = (e) => {
        setNotes(e.target.value);
    }
    // How form submission is handled
    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            const response = await api.post('projects/punch/', {
                id: proj.id,
                store: proj.store,
                date: proj.date,
                ceilingTilesService: ceilingTilesService,
                ceilingVentsService: ceilingVentsService,
                ceilingVentsWaiting: ceilingVentsWaiting,
                posService: posService,
                serviceCounter: serviceCounter,
                oven: oven,
                ovenDisassembled: ovenDisassembled,
                ovenReassembled: ovenReassembled,
                ovenAlerts: ovenAlerts,
                ovenExterior: ovenExterior,
                walls: walls,
                posWall: posWall,
                ceilingTilesPrep: ceilingTilesPrep,
                ceilingVentsPrep: ceilingVentsPrep,
                quarryTile: quarryTile,
                cutTable: cutTable,
                makeLine: makeLine,
                subLine: subLine,
                hotBoxes: hotBoxes,
                doughPrep: doughPrep,
                posDelivery: posDelivery,
                managerStation: managerStation,
                handSinks: handSinks,
                dispensers: dispensers,
                otherEquipment: otherEquipment,
                ceilingTilesBack: ceilingTilesBack,
                ceilingVentsBack: ceilingVentsBack,
                trash: trash,
                cleanup: cleanup,
                alarm: alarm,
                notes: notes,
            });
            if (response.status === 200) {
                onSuccess(response.data.message);
            }
        } catch (error) {
            alert(error.detail);
        }
    }
    const onSuccess = (message) => {
        alert(message);
        window.location.reload();
    }

    const modalId = `modal-${proj.id.replace(/\s+/g, '-')}`;
    return (
        <div>
            <button type="button" className="btn btn-primary m-3" data-bs-toggle="modal"
                    data-bs-target={`#${modalId}`}>
                Create Punchlist
            </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 Punchlist
                            </h1>
                            <button type="button" className="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                        </div>
                        <div className="modal-body">
                            <p>Project ID: {proj.id}</p>
                            <p>Store #: {proj.store} - {proj.city}</p>
                            <p>Date: {proj.date}</p>

                            <form>
                                <label className="form-label" htmlFor="punchlist-lobby">
                                    Lobby
                                </label>
                                <div className="mb-3" id="punchlist-lobby">
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCeilingTilesService} id="ceiling-tiles-service"/>
                                            <label className="form-check-label"
                                                   htmlFor="ceiling-tiles-service">
                                                Ceiling tiles above service counter wiped clean
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCeilingVentsService} id="ceiling-vents-service"/>
                                            <label className="form-check-label"
                                                   htmlFor="ceiling-vents-service">
                                                Ceiling vents above service counter dusted and cleaned
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCeilingVentsWaiting} id="ceiling-vents-waiting"/>
                                            <label className="form-check-label"
                                                   htmlFor="ceiling-vents-waiting">
                                                Ceiling vents in waiting area dusted and cleaned
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetPosService} id="pos-service"/>
                                            <label className="form-check-label"
                                                   htmlFor="pos-service">
                                                POS systems and peripherals wiped clean
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetServiceCounter} id="service-counter"/>
                                            <label className="form-check-label"
                                                   htmlFor="service-counter">
                                                Service counter wiped clean and polished
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <label className="form-label" htmlFor="punchlist-kitchen">
                                    Kitchen
                                </label>
                                <div className="mb-3">
                                    <label htmlFor="oven-type">
                                        Oven type:
                                    </label>
                                    <div id="oven-type" className="mb-3">
                                        <div className="form-check">
                                            <input className="form-check-input" type="radio" name="oven"
                                                   onClick={handleSetOven} id="middleby" value="Middleby-Marshall"/>
                                            <label className="form-check-label" htmlFor="middleby">
                                                Middleby-Marshall
                                            </label>
                                        </div>
                                        <div className="form-check">
                                            <input className="form-check-input" type="radio" name="oven"
                                                   onClick={handleSetOven} id="xlt" value="XLT"/>
                                            <label className="form-check-label" htmlFor="xlt">
                                                XLT
                                            </label>
                                        </div>
                                        <div className="form-check">
                                            <input className="form-check-input" type="radio" name="oven"
                                                   onClick={handleSetOven} id="other-oven" value="Other"/>
                                            <label className="form-check-label" htmlFor="other-oven">
                                                Other - add notes
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div className="mb-3" id="punchlist-kitchen">
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetOvenDisassembled} id="oven-diassembled"/>
                                            <label className="form-check-label"
                                                   htmlFor="oven-diassembled">
                                                Oven disassembled and cleaned
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetOvenReassembled} id="oven-reassembled"/>
                                        <label className="form-check-label"
                                               htmlFor="oven-reassembled">
                                            Oven reassembled to original configuration
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetOvenAlerts} id="oven-alerts"/>
                                        <label className="form-check-label"
                                               htmlFor="oven-alerts">
                                            Oven alerts identified - add notes to supervisor
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetOvenExterior} id="oven-exterior"/>
                                        <label className="form-check-label"
                                               htmlFor="oven-exterior">
                                            Oven exterior wiped clean and polished
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetWalls} id="walls"/>
                                        <label className="form-check-label"
                                               htmlFor="walls">
                                            All walls, floor-to-ceiling, wiped clean
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetPosWall} id="pos-wall"/>
                                        <label className="form-check-label"
                                               htmlFor="pos-wall">
                                            Wall-mounted POS systems and peripherals wiped clean
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetCeilingTilesPrep} id="ceiling-tiles-prep"/>
                                        <label className="form-check-label"
                                               htmlFor="ceiling-tiles-prep">
                                            Ceiling tiles wiped clean
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetCeilingVentsPrep} id="ceiling-vents-prep"/>
                                        <label className="form-check-label"
                                               htmlFor="ceiling-vents-prep">
                                            Ceiling vents dusted and cleaned
                                        </label>
                                    </div>
                                </div>
                                <div className="mb-3">
                                    <div className="form-check form-switch">
                                        <input className="form-check-input" type="checkbox" role="switch"
                                               onChange={handleSetQuarryTile} id="quarry-tile"/>
                                        <label className="form-check-label"
                                               htmlFor="quarry-tile">
                                            Quarry tile floors - add notes to supervisor
                                        </label>
                                    </div>
                                </div>

                                <label className="form-label" htmlFor="punchlist-kitchen-equipment">
                                    Kitchen Equipment
                                </label>
                                <div className="mb-3" id="punchlist-kitchen-equipment">
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCutTable} id="cut-table"/>
                                            <label className="form-check-label"
                                                   htmlFor="cut-table">
                                                Cut table
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetMakeLine} id="make-line"/>
                                            <label className="form-check-label"
                                                   htmlFor="make-line">
                                                Make line
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetSubLine} id="sub-line"/>
                                            <label className="form-check-label"
                                                   htmlFor="sub-line">
                                                Sub line
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetHotBoxes} id="hot-boxes"/>
                                            <label className="form-check-label"
                                                   htmlFor="hot-boxes">
                                                Hot boxes
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetDoughPrep} id="dough-prep"/>
                                            <label className="form-check-label"
                                                   htmlFor="dough-prep">
                                                Dough prep
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetPosDelivery} id="pos-delivery"/>
                                            <label className="form-check-label"
                                                   htmlFor="pos-delivery">
                                                Delivery POS systems
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetManagerStation} id="manager-station"/>
                                            <label className="form-check-label"
                                                   htmlFor="manager-station">
                                                Manager station(s)
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetHandSinks} id="hand-sinks"/>
                                            <label className="form-check-label"
                                                   htmlFor="hand-sinks">
                                                Hand-washing sinks
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetDispensers} id="dispensers"/>
                                            <label className="form-check-label"
                                                   htmlFor="dispensers">
                                                Soap and paper dispensers
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetOtherEquipment} id="other-equipment"/>
                                            <label className="form-check-label"
                                                   htmlFor="other">
                                                Other - add notes
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <label className="form-label" htmlFor="punchlist-back">
                                    Back Room / Dishwashing Area
                                </label>
                                <div className="mb-3" id="punchlist-back">
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCeilingTilesBack} id="ceiling-tiles-back"/>
                                            <label className="form-check-label"
                                                   htmlFor="ceiling-tiles-back">
                                                Ceiling tiles wiped clean
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCeilingVentsBack} id="ceiling-vents-back"/>
                                            <label className="form-check-label"
                                                   htmlFor="ceiling-vents-back">
                                                Ceiling vents dusted and cleaned
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <label className="form-label" htmlFor="punchlist-wrapup">
                                    Nightly Wrap-Up
                                </label>
                                <div className="mb-3" id="punchlist-wrapup">
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetTrash} id="trash"/>
                                            <label className="form-check-label"
                                                   htmlFor="trash">
                                                Trash receptacles emptied
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetCleanup} id="cleanup"/>
                                            <label className="form-check-label"
                                                   htmlFor="cleanup">
                                                Store left in clean and presentable condition
                                            </label>
                                        </div>
                                    </div>
                                    <div className="mb-3">
                                        <div className="form-check form-switch">
                                            <input className="form-check-input" type="checkbox" role="switch"
                                                   onChange={handleSetAlarm} id="alarm"/>
                                            <label className="form-check-label"
                                                   htmlFor="alarm">
                                                Store locked and alarm set (if applicable)
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div className="mb-3" id="punchlist-notes">
                                    <div className="mb-3">
                                        <label htmlFor="notes" className="form-label">
                                            Notes
                                        </label>
                                        <textarea onChange={handleSetNotes} id="notes" className="form-control"
                                                  rows="5"></textarea>
                                    </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>
    )
}
