window.Sidebar = {
    props: ['selectedCell'],
    emits: ['update-cell', 'close'],
    setup(props, { emit }) {
        const { ref, watch } = Vue;
        
        const shiftType = ref(null);
        const startTime = ref('');
        const endTime = ref('');
        const notes = ref('');
        const selectedGroups = ref([]);

        const shiftOptions = [
            'Morning Shift (08:00-16:00)',
            'Afternoon Shift (12:00-20:00)',
            'Night Shift (20:00-04:00)',
            'Training',
            'Absence'
        ];

        const groupOptions = [
            'Molecular App',
            'EOD Morning',
            'EOD Afternoon',
            'Special Project'
        ];

        watch(() => props.selectedCell, (newVal) => {
            if (newVal) {
                shiftType.value = null;
                startTime.value = '08:00';
                endTime.value = '16:00';
                notes.value = '';
                selectedGroups.value = [];
            }
        });

        const save = () => {
            emit('update-cell', {
                shiftType: shiftType.value,
                time: \`\${startTime.value} - \${endTime.value}\`,
                notes: notes.value,
                groups: selectedGroups.value
            });
            emit('close');
        };

        return {
            shiftType,
            startTime,
            endTime,
            notes,
            selectedGroups,
            shiftOptions,
            groupOptions,
            save
        };
    },
    template: `
        <div class="column full-height bg-white">
            <q-toolbar class="bg-white text-grey-9 border-bottom">
                <q-btn flat round dense icon="close" @click="$emit('close')"></q-btn>
                <q-toolbar-title class="text-subtitle1">
                    Edit Shift
                </q-toolbar-title>
                <q-btn flat round dense icon="check" color="primary" @click="save"></q-btn>
            </q-toolbar>

            <div class="col q-pa-md scroll" v-if="selectedCell">
                <div class="text-subtitle2 q-mb-xs text-grey-7">
                    {{ selectedCell.day.dayName }}, {{ selectedCell.day.dayNum }}
                </div>
                <div class="text-h6 q-mb-md">{{ selectedCell.agent.name }}</div>

                <q-separator class="q-mb-md"></q-separator>

                <q-select
                    outlined
                    dense
                    v-model="shiftType"
                    :options="shiftOptions"
                    label="Shift Type"
                    class="q-mb-md"
                ></q-select>

                <div class="row q-gutter-sm q-mb-md">
                    <q-input outlined dense v-model="startTime" label="Start" class="col" mask="time" :rules="['time']">
                        <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                    <q-time v-model="startTime"></q-time>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                    <q-input outlined dense v-model="endTime" label="End" class="col" mask="time" :rules="['time']">
                         <template v-slot:append>
                            <q-icon name="access_time" class="cursor-pointer">
                                <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                                    <q-time v-model="endTime"></q-time>
                                </q-popup-proxy>
                            </q-icon>
                        </template>
                    </q-input>
                </div>

                <q-select
                    outlined
                    dense
                    v-model="selectedGroups"
                    :options="groupOptions"
                    label="ExNet Groups"
                    multiple
                    use-chips
                    stack-label
                    class="q-mb-md"
                ></q-select>

                <q-input
                    outlined
                    v-model="notes"
                    label="Notes / Activities"
                    type="textarea"
                    rows="3"
                    class="q-mb-md"
                ></q-input>

                <q-banner class="bg-blue-1 text-blue-10 rounded-borders" v-if="shiftType">
                    <template v-slot:avatar>
                        <q-icon name="info" color="blue" />
                    </template>
                    Shift complies with daily rest rules.
                </q-banner>
            </div>
            <div v-else class="col flex flex-center text-grey-5">
                Select a cell to edit
            </div>
        </div>
    `
};