<template>
  <ValidationObserver v-slot="{}" slim>
    <!--  TODO: make the inputs into actual components -->
    <v-container class="module-instruct">
      <div class="module-instruct__container">
        <div class="module-instruct__description">
          <div class="module-instruct__description-label">
            <span>Goal</span>
            <v-dialog v-model="tutorialDialog" width="516">
              <template #activator>
                <v-tooltip right>
                  <template #activator="{ on, attrs }">
                    <v-btn v-bind="attrs" v-on="on" icon
                      ><v-icon @click="tutorialDialog = true" color="grey darken-2"
                        >mdi-youtube</v-icon
                      ></v-btn
                    >
                  </template>
                  <span>Watch video overview</span>
                </v-tooltip>
              </template>
              <v-card dark class="login__dialog">
                <div>
                  <iframe
                    width="100%"
                    height="400"
                    src="https://www.youtube.com/embed/SWeFfq7-5IA"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen
                  ></iframe>
                </div>
              </v-card>
            </v-dialog>
          </div>

          <v-textarea
            v-model="goal"
            rows="3"
            outlined
            class=""
            rounded
            hide-details
            dense
            auto-grow
            disabled
          ></v-textarea>
        </div>
        <div class="module-instruct__instructions">
          <div class="module-instruct__description-label">
            <span>Instructions</span>

            <v-tooltip right>
              <template #activator="{ on, attrs }">
                <a
                  href="https://discord.gg/UdNAW5aKdm"
                  target="_blank"
                  style="text-decoration: none"
                >
                  <v-btn v-bind="attrs" v-on="on" icon
                    ><v-icon color="grey darken-2">mdi-face-agent</v-icon></v-btn
                  ></a
                >
              </template>
              <span>Ask questions & get advice</span>
            </v-tooltip>
          </div>
          <div
            v-for="(i, index) in boilerInstructions"
            :key="index"
            class="module-instruct__instructions-item"
          >
            <v-avatar
              size="35"
              color="white"
              class="module-instruct__instructions-av font-weight-bold"
            >
              {{ index + 1 }}
            </v-avatar>

            <validation-provider v-slot="{ errors }" slim rules="required">
              <v-textarea
                v-model="boilerInstructions[index]"
                :error-messages="errors"
                rows="1"
                outlined
                hide-details
                dense
                rounded
                class=""
                auto-grow
                disabled
              ></v-textarea>
            </validation-provider>
          </div>

          <!-- <div>
            <v-btn
              class="module-instruct__instructions-add font-weight-black text-body-1"
              depressed
              color="white"
              :disabled="invalid"
              :ripple="false"
              @click="populate()"
            >
              <v-icon class="module-instruct__instructions-add-icon"> mdi-plus </v-icon>
            </v-btn>
          </div> -->
        </div>
      </div>
    </v-container>
  </ValidationObserver>
</template>

<script lang="ts">
import { ref } from '@vue/composition-api';

export default {
  name: 'ModuleInstruct',

  setup() {
    // const programDoc = computed({
    //   get: () => props.value,
    //   set: newVal => {
    //     ctx.emit('input', newVal);
    //   }
    // });
    const boilerInstructions = ref([
      'Start practicing and applying your learning',
      'Log time spent',
      'Come back to activity to log additional time spent on project'
    ]);
    const goal = ref(['To spend time practicing, applying and logging time spent on your project']);
    function populate() {
      boilerInstructions.value.push('');
    }

    return { boilerInstructions, populate, tutorialDialog: false, goal };
  }
};
</script>

<style lang="scss">
.module-instruct__instructions-av {
  margin-right: 3%;
}
</style>
