<template>
    <div class="carWrapper" v-bind:style="{ backgroundImage: 'url(' + determineImage() + ')' }">
        <div class="cancel" v-bind:class="vehicleClass" @click="WebViewEvents.emitClose()">Nicht einsteigen</div>
        <div class="seatContainer" v-bind:class="vehicleClass">
            <div class="seatWrapper" v-for="seat in seats">
                <div class="seat" v-bind:class="seat.isFree ? '' : 'notFree'" v-if="seat.index !== -1" @click="seat.isFree ? enterSeat(seat.index) : console.log('Seat is not free')">
                    <svg xmlns="http://www.w3.org/2000/svg" width="307.000000pt" height="371.000000pt" viewBox="0 0 307.000000 371.000000" preserveAspectRatio="xMidYMid meet">
                        <g transform="translate(0.000000,371.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                            <path d="M1179 3650 c-115 -8 -183 -31 -248 -85 -51 -44 -101 -174 -126 -330 -24 -149 -17 -223 24 -241 9 -4 329 -8 711 -8 l695 -1 29 28 c29 28 29 29 23 116 -8 113 -21 174 -60 291 -55 166 -131 215 -352 230 -139 10 -542 9 -696 0z"/>
                            <path d="M800 3533 c-62 -7 -160 -32 -212 -55 -42 -18 -53 -29 -70 -67 -41 -93 -98 -254 -98 -276 0 -43 69 -160 142 -240 166 -182 197 -298 205 -777 l5 -288 769 0 769 0 0 229 c0 484 41 651 204 831 74 81 146 200 146 241 0 23 -51 160 -93 253 -32 69 -37 74 -88 94 -56 23 -176 52 -217 52 -21 0 -22 -1 -9 -27 45 -89 87 -285 87 -405 0 -119 -41 -170 -138 -169 -1250 4 -1378 6 -1406 24 -15 10 -35 35 -43 55 -30 71 3 330 60 470 14 34 25 61 24 60 -1 0 -18 -3 -37 -5z"/>
                            <path d="M2667 3293 c171 -451 300 -1078 330 -1603 5 -105 8 -119 16 -90 13 48 1 460 -18 638 -47 436 -146 780 -301 1045 -25 42 -48 77 -50 77 -1 0 8 -30 23 -67z"/>
                            <path d="M380 3280 c-146 -250 -246 -594 -295 -1015 -19 -166 -35 -565 -25 -630 4 -27 8 -45 9 -40 0 6 8 87 16 180 46 530 157 1059 304 1460 22 60 39 111 36 113 -2 2 -22 -29 -45 -68z"/>
                            <path d="M331 2893 c-97 -347 -160 -708 -196 -1118 -22 -247 -21 -273 10 -287 30 -13 99 0 186 36 128 52 351 230 369 294 13 48 13 429 0 563 -23 232 -64 337 -184 470 -42 46 -88 108 -103 136 -16 29 -31 53 -34 53 -4 0 -25 -66 -48 -147z"/>
                            <path d="M2663 2990 c-17 -30 -65 -93 -108 -139 -122 -132 -161 -235 -185 -486 -13 -141 -13 -489 0 -537 19 -66 213 -227 355 -293 83 -39 166 -60 200 -51 24 6 25 10 25 74 0 176 -53 622 -106 897 -28 142 -90 397 -127 515 l-23 74 -31 -54z"/>
                            <path d="M715 1538 c-101 -522 -107 -557 -108 -683 -1 -238 67 -458 208 -670 30 -44 67 -95 84 -113 l30 -32 623 2 622 3 58 75 c78 100 181 309 213 431 52 200 49 352 -15 684 -23 116 -55 285 -73 377 l-32 168 -781 0 -781 0 -48 -242z m1640 -553 c0 -20 -8 -20 -807 -23 -779 -2 -808 -1 -808 16 0 10 3 22 7 25 3 4 367 6 807 5 793 -3 801 -3 801 -23z"/>
                            <path d="M625 1648 c-125 -107 -298 -207 -358 -208 -18 0 -19 -17 -14 -407 5 -446 9 -488 66 -610 65 -139 244 -277 440 -342 36 -12 68 -21 72 -21 4 0 -18 37 -48 82 -94 141 -154 276 -194 438 -20 82 -23 119 -23 270 1 165 3 187 43 385 44 220 90 469 88 472 -1 1 -33 -26 -72 -59z"/>
                            <path d="M2400 1697 c0 -3 22 -124 49 -268 27 -145 57 -307 67 -359 23 -126 23 -345 -1 -455 -36 -170 -96 -313 -194 -463 l-60 -91 52 16 c181 54 389 214 451 347 56 121 59 148 63 599 4 342 2 417 -9 417 -26 0 -167 68 -234 113 -38 25 -95 69 -126 97 -32 28 -58 49 -58 47z"/>
                        </g>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="307.000000pt" height="371.000000pt" viewBox="0 0 307.000000 371.000000" preserveAspectRatio="xMidYMid meet">
                        <g style="fill: black" transform="translate(0.000000,371.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
                            <path d="M1230 3699 c-153 -6 -192 -14 -271 -54 -19 -10 -45 -27 -59 -40 -19 -17 -43 -24 -99 -30 -174 -16 -308 -71 -387 -158 -161 -177 -312 -613 -368 -1062 -39 -310 -50 -733 -21 -803 29 -69 86 -112 149 -112 l35 0 4 -432 c3 -378 6 -441 21 -493 30 -101 68 -165 141 -240 119 -122 266 -206 427 -245 79 -19 118 -20 744 -20 630 0 665 1 740 20 151 39 295 121 407 235 75 75 119 153 149 262 20 73 22 105 26 496 l4 417 37 0 c57 0 113 47 139 119 16 43 17 358 1 551 -37 473 -125 826 -282 1135 -51 100 -73 132 -133 191 -64 63 -80 73 -151 97 -83 27 -184 47 -244 47 -25 0 -42 7 -58 24 -29 31 -125 74 -193 86 -64 12 -543 17 -758 9z m800 -67 c92 -30 142 -70 175 -140 41 -87 75 -233 82 -354 6 -103 5 -107 -19 -130 l-24 -25 -706 1 c-691 1 -706 1 -728 21 -22 19 -22 25 -17 135 10 187 73 383 141 435 49 37 120 65 189 75 34 5 238 7 452 6 368 -2 394 -4 455 -24z m-1190 -95 c0 -2 -13 -39 -29 -83 -40 -110 -61 -227 -61 -344 0 -109 15 -141 74 -164 23 -9 214 -12 733 -11 693 1 703 1 730 21 42 32 54 75 48 179 -9 136 -36 253 -90 378 -6 14 -2 17 26 17 51 0 160 -26 217 -50 45 -20 52 -27 80 -88 57 -124 94 -227 93 -260 -1 -52 -64 -160 -146 -250 -161 -177 -199 -329 -200 -794 l0 -268 -775 0 -775 0 4 182 c3 199 -11 430 -35 547 -32 156 -75 238 -191 364 -61 67 -107 140 -124 200 -8 30 9 89 75 253 l37 92 58 26 c61 27 251 67 251 53z m-411 -209 c-42 -104 -129 -376 -168 -528 -89 -343 -157 -763 -177 -1085 -15 -247 -40 -116 -30 154 24 591 120 1036 293 1361 41 77 90 150 99 150 2 0 -6 -24 -17 -52z m2259 -25 c159 -270 257 -599 308 -1033 18 -157 30 -654 17 -689 -7 -17 -13 22 -22 145 -42 579 -178 1201 -357 1638 -16 40 14 5 54 -61z m-2278 -302 c18 -33 66 -97 107 -143 162 -179 198 -330 191 -812 l-3 -248 -82 -78 c-140 -133 -302 -225 -417 -237 -90 -9 -92 -6 -84 144 17 318 63 658 134 983 23 106 115 450 121 450 1 0 16 -27 33 -59z m2328 -87 c50 -174 104 -415 137 -606 50 -297 94 -805 71 -820 -42 -28 -181 12 -305 87 -109 66 -255 194 -270 236 -14 42 -15 449 0 594 22 222 64 324 187 459 44 48 93 111 108 141 16 30 29 53 30 52 1 -1 20 -65 42 -143z m-374 -1321 c84 -428 115 -603 122 -684 8 -106 -9 -262 -42 -378 -32 -115 -128 -307 -204 -408 l-61 -83 -629 0 -628 0 -37 41 c-75 84 -169 249 -218 384 -47 131 -62 227 -61 390 1 137 5 171 49 390 26 132 58 299 71 370 14 72 27 138 30 148 5 16 51 17 789 17 l783 0 36 -187z m-1683 -4 c-11 -63 -38 -208 -60 -323 -66 -341 -71 -408 -45 -585 29 -203 119 -420 237 -574 16 -21 27 -41 23 -44 -11 -11 -124 26 -204 66 -147 74 -258 174 -312 281 -58 116 -63 156 -67 611 l-5 416 76 27 c86 32 223 120 311 199 33 30 61 51 63 47 2 -4 -6 -59 -17 -121z m1854 7 c82 -63 179 -117 253 -141 l52 -17 0 -329 c0 -514 -23 -647 -137 -786 -77 -93 -235 -197 -372 -244 -82 -28 -86 -25 -43 34 94 126 164 276 209 446 37 141 43 352 14 516 -22 121 -108 585 -115 618 -3 13 4 10 32 -13 21 -17 69 -55 107 -84z"/>
                            <path d="M750 995 c-6 -8 -9 -19 -5 -25 4 -7 261 -10 805 -10 669 0 799 2 803 14 3 7 0 19 -6 25 -8 8 -230 11 -798 11 -676 0 -788 -2 -799 -15z"/>
                        </g>
                    </svg>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import WebViewEvents from '@utility/webViewEvents.js';
import { SEAT_SELECTOR_EVENTS } from '@AthenaPlugins/odyssey-seat-selector/shared/events.js';
import ResolvePath from '@utility/pathResolver.js';
import { WebViewEventNames } from '@AthenaShared/enums/webViewEvents.js';

let seats = ref([
    { isFree: true, index: -1 },
    { isFree: false, index: 0 },
    { isFree: true, index: 1 },
    { isFree: true, index: 2 },
    { isFree: false, index: 3 },
    { isFree: false, index: 4 },
    { isFree: false, index: 5 },
    { isFree: false, index: 6 },
    { isFree: false, index: 7 },
    { isFree: false, index: 8 },
    { isFree: false, index: 9 },
    { isFree: false, index: 10 },
    { isFree: false, index: 11 },
    { isFree: false, index: 12 },
    { isFree: false, index: 13 },
    { isFree: false, index: 14 },
]);

let vehicle = ref(0);

let vehicleClass = ref('service');

function enterSeat(index: number) {
    console.log('enterSeat()', index);
    WebViewEvents.emitClient(SEAT_SELECTOR_EVENTS.ENTER_VEHICLE, vehicle.value, index);
    WebViewEvents.emitClose();
}

function determineImage() {
    if (seats.value.length <= 4) {
        vehicleClass.value = 'car';
        return ResolvePath(`@plugins/images/odyssey-seat-selector/car.png`);
    } else if (seats.value.length <= 8) {
        vehicleClass.value = 'suv';
        return ResolvePath(`@plugins/images/odyssey-seat-selector/ov.png`);
    }

    vehicleClass.value = 'service';
    return ResolvePath(`@plugins/images/odyssey-seat-selector/bus.png`);
}

onMounted(() => {
    WebViewEvents.on(WebViewEventNames.CLOSE_PAGE, () => {
        WebViewEvents.emitClose();
    });

    WebViewEvents.on(SEAT_SELECTOR_EVENTS.UPDATE_DATA, (data) => {
        seats.value = data;
    });

    WebViewEvents.on(SEAT_SELECTOR_EVENTS.SET_VEHICLE, (veh) => {
        vehicle.value = veh;
    });

    WebViewEvents.emitReady('SeatSelectorMenu');
});
</script>
<style scoped>
.carWrapper {
    min-height: 45vh;
    width: 21vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.carWrapper:has(.service) {
    min-height: 55vh;
}

.seatContainer {
    width: 12vh;
    display: flex;
    flex-wrap: wrap;
    gap: 2vh;
    margin: 12vh 4.5vh 0 4.5vh;
}

.seatContainer.suv {
    gap: 0.1vh;
    margin: 9.5vh 4.6vh 0 4.6vh;
}

.seatContainer.service {
    gap: 1vh;
    margin: 6vh 4.5vh 0 4.5vh;
}

.seatWrapper {
    height: 5vh;
    width: 5vh;
    margin: auto;
}

.seat > svg {
    position: absolute;
    height: 5vh;
    width: 5vh;
    transform: rotate(180deg);
}

.seat > svg > g {
    fill: white;
}

.notFree > svg > g {
    fill: maroon;
}

.suv > .seatWrapper,
.suv > .seatWrapper > .seat > svg {
    height: 4vh;
    width: 4vh;
    margin-bottom: 2.2vh;
}

.service > .seatWrapper,
.service > .seatWrapper > .seat > svg {
    height: 4vh;
    width: 4vh;
    margin-bottom: 0.6vh;
}

.cancel {
    background-color: #4c4c4c;
    height: 1vh;
    width: 8vh;
    margin: 4vh 6.5vh 0 6.5vh;
    text-align: center;
    padding-top: 1vh;
    padding-bottom: 1vh;
    line-height: 1vh;
    font-size: 1vh;
    border-radius: 1vh;
}

.cancel.service {
    margin: 0.5vh 6.5vh 0 6.5vh;
}
</style>
