const { inject } = Vue;

export default {
  name: 'AssignmentEditor',
  setup() {
    const appState = inject('appState');
    return { ...appState };
  },
  template: `
    <div class="assignment-editor-root">
      <div class="assignment-editor-date-card q-mb-lg q-pa-md bg-blue-grey-1 rounded-borders">
        <div class="row items-center justify-between no-wrap">
          <div>
            <div class="text-overline text-blue-grey-4">Shift Date</div>
            <div class="text-subtitle1 text-weight-bold text-blue-grey-9">
              {{ selectedDate.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }) }}
            </div>
          </div>
          <q-icon name="event" color="blue-grey-2" size="sm"></q-icon>
        </div>
      </div>
      <div class="text-weight-bold q-mb-md">Standard Shifts</div>
      <div class="row q-col-gutter-sm q-mb-xl">
        <div v-for="s in shifts" :key="s.id" class="col-6">
          <q-btn
            :color="s.color"
            :unelevated="currentAssignmentLabel === s.label"
            :outline="currentAssignmentLabel !== s.label"
            rounded
            dense
            no-caps
            :label="s.label"
            class="full-width q-py-sm"
            @click="setPendingShift(s)"
          ></q-btn>
        </div>
        <div class="col-12">
          <q-btn outline rounded dense color="red-4" label="Clear Assignment" class="full-width q-mt-sm" icon="delete_outline" @click="setPendingShift(null)"></q-btn>
        </div>
      </div>
      <div class="text-weight-bold q-mb-sm text-grey-7">Cell Identifier</div>
      <div class="assignment-editor-cell-id bg-grey-1 q-pa-sm rounded-borders">
        #cell-{{selectedAgent.id}}-{{formatDateForId(selectedDate)}}
      </div>
    </div>
  `
};