---
import LoggedIn from '../../layouts/LoggedIn.astro';
import { Planet } from '../../lib/classes/managers/PlanetManager';
import SystemManager from '../../lib/classes/managers/SystemManager';

const { token, lang } = Astro.locals;
const active: SystemManager | Planet = Astro.locals.active;

if(active instanceof SystemManager) {
	return Astro.redirect('/game');
}

if(Astro.request.method === "POST") {
    const body = await Astro.request.formData();

    for(const [key, value] of body.entries()) {
        console.log(key, value);
    }

    return Astro.redirect('/game/energy');
}

const buildingsList = {
    "mines": active.buildings.buildings.filter(building => building.data.category === "mines"),
    "powerPlants": active.buildings.buildings.filter(building => building.data.category === "power-plants"),
    "utilities": active.buildings.buildings.filter(building => building.data.category === "utilities"),
    "storage": active.buildings.buildings.filter(building => building.data.category === "storage")
}
---
<LoggedIn id="energy" title="Energy">
	<form method="post" class="form-container">
        <table>
            <tr class="table-col-header">
                <th>Building name</th>
                <th>Level</th>
                <th>Production %</th>
                <th>Production per hour</th>
                <th>Energy usage</th>
            </tr>
            <tr><td colspan="5" class="table-separator">Mines</td></tr>
            {buildingsList.mines.map(building => <tr>
                <td>{building.data.id}</td>
                <td>{building.level}</td>
                <td><select name={`percent_${building.data.id}`}>
					<option value="100" {...{ selected: (building.activePercent ?? 100) === 100 }}>100%</option>
                    <option value="90" {...{ selected: (building.activePercent ?? 100) === 90 }}>90%</option>
                    <option value="80" {...{ selected: (building.activePercent ?? 100) === 80 }}>80%</option>
                    <option value="70" {...{ selected: (building.activePercent ?? 100) === 70 }}>70%</option>
                    <option value="60" {...{ selected: (building.activePercent ?? 100) === 60 }}>60%</option>
                    <option value="50" {...{ selected: (building.activePercent ?? 100) === 50 }}>50%</option>
                    <option value="40" {...{ selected: (building.activePercent ?? 100) === 40 }}>40%</option>
                    <option value="30" {...{ selected: (building.activePercent ?? 100) === 30 }}>30%</option>
                    <option value="20" {...{ selected: (building.activePercent ?? 100) === 20 }}>20%</option>
                    <option value="10" {...{ selected: (building.activePercent ?? 100) === 10 }}>10%</option>
                    <option value="0" {...{ selected: (building.activePercent ?? 100) === 0 }}>0%</option>
				</select></td>
                <td>15</td>
                <td class="red">-{building.level * building.data.energy}</td>
            </tr>)}
            <tr><td colspan="5" class="table-separator">Power plants</td></tr>
            {buildingsList.powerPlants.map(building => <tr>
                <td>{building.data.id}</td>
                <td>{building.level}</td>
                <td><select name={`percent_${building.data.id}`}>
					<option value="100" {...{ selected: (building.activePercent ?? 100) === 100 }}>100%</option>
                    <option value="90" {...{ selected: (building.activePercent ?? 100) === 90 }}>90%</option>
                    <option value="80" {...{ selected: (building.activePercent ?? 100) === 80 }}>80%</option>
                    <option value="70" {...{ selected: (building.activePercent ?? 100) === 70 }}>70%</option>
                    <option value="60" {...{ selected: (building.activePercent ?? 100) === 60 }}>60%</option>
                    <option value="50" {...{ selected: (building.activePercent ?? 100) === 50 }}>50%</option>
                    <option value="40" {...{ selected: (building.activePercent ?? 100) === 40 }}>40%</option>
                    <option value="30" {...{ selected: (building.activePercent ?? 100) === 30 }}>30%</option>
                    <option value="20" {...{ selected: (building.activePercent ?? 100) === 20 }}>20%</option>
                    <option value="10" {...{ selected: (building.activePercent ?? 100) === 10 }}>10%</option>
                    <option value="0" {...{ selected: (building.activePercent ?? 100) === 0 }}>0%</option>
				</select></td>
                <td></td>
                <td class="green">+{building.level * building.data.energy}</td>
            </tr>)}
            <tr><td colspan="5" class="table-separator">Utilities</td></tr>
            {buildingsList.utilities.map(building => <tr>
                <td>{building.data.id}</td>
                <td>{building.level}</td>
                <td></td>
                <td></td>
                <td class="red">-{building.level * building.data.energy}</td>
            </tr>)}
            <tr><td colspan="5" class="table-separator">Storage</td></tr>
            {buildingsList.storage.map(building => <tr>
                <td>{building.data.id}</td>
                <td>{building.level}</td>
                <td></td>
                <td></td>
                <td class="red">-{building.level * building.data.energy}</td>
            </tr>)}
        </table>
        <input type="submit" value="Save" class="save-button" />
    </form>
</LoggedIn>
<style>
.form-container {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

h1 {
    color: white;
}

.green {
    color: green;
}

.red {
    color: red;
}

.table-col-header {
    background-color: #444;
}

.table-separator {
    background-color: #222;
    font-weight: 1000;
    text-align: center;
}

.table-col-header th {
    border: 1px solid white;
    padding: 10px;
}

th {
    font-weight: 900;
}

tr {
    color: white;
}

td {
    padding: 10px;
    border: 1px solid white;
}

.form-container .save-button {
    flex-grow: 1;
    margin-top: 20px;
    padding: 10px;
    background-color: #444;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}
</style>