<template>
  <current-household />

  <h2>{{ $t("household_members_editor.dates.dates_title") }}</h2>

  <div class="mb-3 row">
    <label for="start_date" class="col-form-label col-sm-4 required">
      {{ $t("household_members_editor.dates.start_date") }}
    </label>
    <div class="col-sm-8">
      <input type="date" v-model="startDate" class="form-control" />
    </div>
  </div>

  <div v-if="this.isHouseholdNew">
    <h2>{{ $t("household_members_editor.composition.composition") }}</h2>
    <div class="mb-3 row">
      <label class="col-form-label col-sm-4 required">{{
        $t("household_members_editor.composition.household_composition")
      }}</label>
      <div class="col-sm-8">
        <select
          v-model="householdCompositionType"
          class="form-select form-control"
        >
          <option
            v-for="t in householdCompositionTypes"
            :key="t.id"
            :value="t.id"
          >
            {{ localizeString(t.label) }}
          </option>
        </select>
      </div>
    </div>
    <div class="mb-3 row">
      <label class="col-form-label col-sm-4 required">{{
        $t("household_members_editor.composition.number_of_children")
      }}</label>
      <div class="col-sm-8">
        <input
          type="number"
          v-model="numberOfChildren"
          min="0"
          max="30"
          class="form-control"
        />
      </div>
    </div>
    <div v-if="this.displayDependents" class="mb-3 row">
      <label class="col-form-label col-sm-4 required">{{
        $t("household_members_editor.composition.number_of_dependents")
      }}</label>
      <div class="col-sm-8">
        <input
          type="number"
          v-model="numberOfDependents"
          min="0"
          max="30"
          class="form-control"
        />
      </div>
    </div>
    <div v-if="this.displayDependents" class="mb-3 row">
      <label class="col-form-label col-sm-4 required">{{
        $t(
          "household_members_editor.composition.number_of_dependents_with_disabilities",
        )
      }}</label>
      <div class="col-sm-8">
        <input
          type="number"
          v-model="numberOfDependentsWithDisabilities"
          min="0"
          max="30"
          class="form-control"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CurrentHousehold from "./CurrentHousehold";
import { mapGetters, mapState } from "vuex";
import { localizeString } from "ChillMainAssets/lib/localizationHelper/localizationHelper";

export default {
  name: "Dates",
  methods: { localizeString },
  components: {
    CurrentHousehold,
  },
  computed: {
    ...mapState(["householdCompositionTypes"]),
    ...mapGetters(["isHouseholdNew"]),
    displayDependents: {
      get() {
        return window.household_members_editor_data.displayDependents;
      },
    },
    householdCompositionType: {
      get() {
        if (this.$store.state.householdCompositionType !== null) {
          return this.$store.state.householdCompositionType.id;
        }
        return null;
      },
      set(value) {
        this.$store.dispatch("setHouseholdCompositionType", value);
      },
    },
    numberOfChildren: {
      get() {
        return this.$store.state.numberOfChildren;
      },
      set(value) {
        this.$store.commit("setNumberOfChildren", value);
      },
    },
    numberOfDependents: {
      get() {
        return this.$store.state.numberOfDependents;
      },
      set(value) {
        this.$store.commit("setNumberOfDependents", value);
      },
    },
    numberOfDependentsWithDisabilities: {
      get() {
        return this.$store.state.numberOfDependentsWithDisabilities;
      },
      set(value) {
        this.$store.commit("setNumberOfDependentsWithDisabilities", value);
      },
    },
    startDate: {
      get() {
        return this.$store.state.startDate;
        // return [
        //   this.$store.state.startDate.getFullYear(),
        //   (this.$store.state.startDate.getMonth() + 1).toString().padStart(2, '0'),
        //   this.$store.state.startDate.getDate().toString().padStart(2, '0')
        // ].join('-');
      },
      set(value) {
        // let
        //   [year, month, day] = value.split('-'),
        //     dValue = new Date(year, month-1, day);

        this.$store.dispatch("setStartDate", value);
      },
    },
  },
};
</script>
