@include("assessments.select_assessment")

<template id="lesson">
    <v-layout>
        <v-flex xs12 v-if="lesson.type === ''">
            <v-layout rows wrap>
                <v-flex xs12>
                    <h4 class="mx-auto text-center text-xs-center align-center">Please select a content type to
                        add
                        to the item</h4>
                </v-flex>

                <v-flex xs12 class="mx-auto text-center text-xs-center align-center">
                    <v-btn flat outline small color="primary" @click="lesson.type='Video'">Video</v-btn>
                    <v-btn flat outline small color="primary" @click="lesson.type='File'">File</v-btn>
                    <v-btn flat outline small color="primary" @click="lesson.type='Text'">Content</v-btn>
                    <v-btn flat outline small color="primary" @click="lesson.type='Assessment'">Assessment</v-btn>
                    <v-btn flat outline small color="primary" @click="lesson.type='Survey'">Survey</v-btn>
                </v-flex>

            </v-layout>
        </v-flex>
        <v-flex xs12 v-else>
            <v-layout rows wrap v-if="lesson.type !== 'Assessment'">
                <v-flex xs12 sm6 pr-2>

                    <v-text-field v-model="lesson.name"
                                  label="Name:*"

                    ></v-text-field>

                </v-flex>
                <v-flex xs12 sm6 v-if="lesson.type === 'Assessment'">
                    <select-assessment :event="eventListener" :assessment="lesson.assessment"/>
                </v-flex>
                <v-flex xs12 sm6 v-if="lesson.type === 'Video'">
                    <v-text-field v-model="lesson.path"
                                  label="Path:*"
                                  placeholder="Enter video URL"
                    ></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 v-if="lesson.type === 'File'">
                    <file-upload :filename="lesson.file" :btn="true" :extra="true" :hideLabel="true" inputname="file"
                                 :event="eventListener" accept="*"
                                 :path="(lesson.file)?lesson.file.url:''"/>
                </v-flex>
                {{-- <v-flex xs12>
                     <v-label>Introduction</v-label>
                     <quill-editor
                         v-model="lesson.introduction"
                         label=""
                         rows="1"
                     ></quill-editor>
                 </v-flex>--}}
                <v-flex xs12 v-if="lesson.type==='Video'">

                    <v-radio-group :row="true" label="How to complete it:*" v-model="lesson.completion_type" inline>
                        <v-radio label="Mark complete" value="complete"></v-radio>
                        <v-radio label="With a question order" value="question"></v-radio>
                        <v-radio label="After a period of time" value="period"></v-radio>
                    </v-radio-group>
                </v-flex>
                <v-flex xs12 v-else>

                    <v-radio-group :row="true" label="How to complete it:*" v-model="lesson.completion_type" inline>
                        <v-radio label="Mark complete" value="complete"></v-radio>
                        <v-radio label="With a question order" value="question"></v-radio>
                    </v-radio-group>
                </v-flex>


                <v-flex xs12>
                    <v-label v-if="lesson.type === 'Text'">Content:*</v-label>
                    <v-label v-else> @{{ lesson.type }} Description:*</v-label>
                    <quill-editor
                        v-model="lesson.description"
                        label="Description"
                        rows="3"
                        box
                    ></quill-editor>
                </v-flex>
                <v-flex>
                    <br/>
                    <v-divider></v-divider>
                    <v-spacer></v-spacer>
                    <v-btn flat outline color="primary" :loading="loading"
                           @click="save">{{__("components.Save")}}</v-btn>
                </v-flex>

            </v-layout>
            <v-layout rows wrap v-else>
                <v-flex xs12 sm6 pr-2>

                    <v-text-field v-model="lesson.name"
                                  label="Name:*"

                    ></v-text-field>

                </v-flex>
               {{-- <v-flex xs12 sm6 v-if="lesson.type === 'Assessment'">
                    <select-assessment :event="eventListener" :assessment="lesson.assessment"/>
                </v-flex>
                <v-flex xs12 sm6 v-if="lesson.type === 'Video'">
                    <v-text-field v-model="lesson.path"
                                  label="Path:*"
                                  placeholder="Enter video URL"
                    ></v-text-field>
                </v-flex>
                <v-flex xs12 sm6 v-if="lesson.type === 'File'">
                    <file-upload :filename="lesson.file" :btn="true" :extra="true" :hideLabel="true" inputname="file"
                                 :event="eventListener" accept="*"
                                 :path="(lesson.file)?lesson.file.url:''"/>
                </v-flex>--}}

                <v-flex xs12 v-if="lesson.type==='Video'">

                    <v-radio-group :row="true" label="How to complete it:*" v-model="lesson.completion_type" inline>
                        <v-radio label="Mark complete" value="complete"></v-radio>
                        <v-radio label="With a question order" value="question"></v-radio>
                        <v-radio label="After a period of time" value="period"></v-radio>
                    </v-radio-group>
                </v-flex>
                <v-flex xs12 v-else>

                    <v-radio-group :row="true" label="How to complete it:*" v-model="lesson.completion_type" inline>
                        <v-radio label="Mark complete" value="complete"></v-radio>
                        <v-radio label="With a question order" value="question"></v-radio>
                    </v-radio-group>
                </v-flex>

                <v-flex>
                    <br/>
                    <v-divider></v-divider>
                    <v-spacer></v-spacer>
                    <v-btn flat outline color="primary" :loading="loading"
                           @click="save">{{__("components.Save")}}</v-btn>
                </v-flex>

            </v-layout>
        </v-flex>

    </v-layout>

</template>
<script>
    const Lesson = {
        template: "#lesson",
        components: {IceTable, FileUpload, SelectAssessment},
        props: {
            loading: false,
            context: Object,
            lesson: Object,
            module: Object,
            event: {
                type: Function,
                default: function (event, data) {
                }
            },

        },
        data: () => ({
            types: [
                {id: "Text", name: "Text"},
                {id: "Video", name: "Video"},
                {id: "File", name: "File"},
                {id: "Assessment", name: "Assessment"},
                {id: "Survey", name: "Survey"},
            ],
            contents: [],
            loading_content: false,
        }), computed: {
            pages() {
                if (this.pagination.rowsPerPage == null ||
                    this.pagination.totalItems == null
                ) return 0;

                return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage)
            },
            params(nv) {
                return {
                    ...this.pagination,
                    query: this.search,
                };
            },

        },
        watch: {
            params: {
                handler() {

                    this.getData().then(data => {
                        this.items = data.items;
                        (this.event)("items", this.items);
                        this.total = data.total;
                    }).catch(error => {
                        //console.log(error.message);
                    });
                },
                deep: true
            },
        },
        mounted() {
console.log("lesson assess",this.lesson.assassment)
        },
        methods: {

            eventListener(event, data) {
                switch (event) {
                    case "items":
                        this.contents = data;
                        break;
                    case "upload":
                        this.lesson.file_id = data.id;
                        this.lesson.path = data.path;
                        (this.event)("toast",{message:"File uploaded successfully",color:"info"});
                        break;
                    case "assessment_selected":
                        this.$nextTick(function () {
                            this.lesson.assessment_id = data.id;
                            this.lesson.assessment = data;
                        });
                        break;

                    default:
                        (this.event)(event,data);
                        break;

                }
            },
            save: function () {
                this.persist('post', "{{route("lessons.store")}}", this.lesson);
            },
            persist(method, uri, object) {


                this.form = {};
                var errors = false;
                if (!object.name || object.name.trim() === "") {

                    (this.event)("toast", {message: "Please enter the name field", color: 'red'});
                    return false;
                }
                if (!object.type) {

                    (this.event)("toast", {message: "Please select a type", color: 'red'});
                    return false;
                }
                if (object.type === "File" && !object.file_id) {

                    (this.event)("toast", {message: "Please select a file", color: 'red'});
                    return false;
                }


                var _this = this;
                this.loading = true;
                object.module_id = this.module.id;
                axios[method](uri, object)
                    .then(response => {
                        _this.loading = false;

                        if (response.data.error) {

                            (_this.event)("toast", {message: response.data.message, color: 'red'});
                        } else {

                            var lesson = response.data;
                            _this.lesson = lesson;
                            //notification of category object
                            (_this.event)("lesson", lesson);
                            (_this.event)("toast", {message: "Success", color: 'success'});


                        }


                    }).catch(error => {

                    // if (typeof error.response.data === 'object') {
                    //     form.errors = _.flatten(_.toArray(error.response.data));
                    // } else {
                    //     form.errors = ['Something went wrong. Please try again.'];
                    // }


                    (_this.event)("error", error);
                    _this.loading = false;

                });


            },
        }
    }
</script>