<script setup>
import { ref } from 'vue'
import BigIcon from './BigIcon.vue'

const props = defineProps({
  icon: String,
  legend: String,
  startReadDate: String,
  endReadDate: String,
  isExpanded: Boolean,
  isReadonly: Boolean,
  useEndDate: Boolean,
  lastWidget: Boolean,
})
defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])

const today = new Date().toISOString().slice(0, 10)

function computeParentClasses() {
  let classNames = 'bookdatewidget'
  if (props.isExpanded) {
    classNames += ' has-text-dark has-background-text'
  }
  if (props.lastWidget) {
    classNames += ' border-radius-right-and-left'
  } else {
    classNames += ' border-radius-right'
  }
  if (props.isReadonly) {
    classNames += ' widget-readonly'
  }
  return classNames
}
</script>

<template>
  <div :class="computeParentClasses()">
    <BigIcon
      :icon="props.icon"
      :is-readonly="props.isReadonly"
      :legend="props.legend"
      :isSet="props.isExpanded"
      @click="props.isReadonly ? null : $emit('onIconClick')"
    />
    <div v-if="props.isExpanded" class="inputdate">
      <div class="ontopofinput">
        <label class="datelabel" for="startread">
          {{ $t('bookdatewidget.started') }}
        </label>
        <input
          class="datepicker has-background-dark has-text-light"
          id="startread"
          type="date"
          @change="(e) => $emit('onStartDateChange', e.target.value)"
          :value="props.startReadDate"
          :max="today"
        />
        <div v-if="props.useEndDate">
          <label class="datelabel" for="endread">
            {{ $t('bookdatewidget.finished') }}
          </label>
          <input
            class="datepicker has-background-dark has-text-light"
            id="endread"
            type="date"
            @change="(e) => $emit('onEndDateChange', e.target.value)"
            :value="props.endReadDate"
            :max="today"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.inputdate {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.border-radius-right {
  border-radius: 0 30px 30px 0;
}

.border-radius-right-and-left {
  border-radius: 0 30px 30px 45px;
}

.ontopofinput {
  display: block;
}

.datelabel {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  border: none;
  padding-bottom: 15px;
}

.datepicker {
  font-size: 26px;
  border-radius: 5px;
}

.widget-readonly {
  opacity: 50%;
}

@media (max-width: 1024px) {
  .bookdatewidget {
    flex: 1;
  }
}

@media (min-width: 1024px) {
  .bookdatewidget {
    display: flex;
    width: 500px;
  }
}
</style>
