const template = html`
<span>
  <div  class="sidebar-tab" @click="quickTaskShow = !quickTaskShow">
      <i class="fa fa-clock-o"></i>
      <i class="fa fa-plus"   ></i>
  </div>
  <div v-show="quickTaskShow" class="panel panel-default rounded"  style="bottom:25px;right:100px;position: fixed;width: 500px;height:auto">
    <div class="panel-heading" style="display: flex; justify-content: space-between; align-items: center;">
      <h4 class="panel-title">Create Quick Task</h4>
      <button type="button" class="close" @click="quickTaskShow = false" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="panel-body" v-if="">

          <div class="card">

            <!--Card content-->
            <div class="card-body px-lg-5 pt-0">
    
                <!-- Form -->
                <form class="text-center" style="color: #757575;" action="#!">

                <div class="form-group row">
                    <div class="col-xs-12">
                      <input class="form-control" id="quickTasktitle" type="text" v-model="title" placeholder="title *" required>
                    </div>
                  </div>

                <div class="form-group row">
                    <div class="col-xs-6">
                      <input class="form-control" id="quickTaskStaff" type="text" placeholder="Staff to assign..." v-model="Staff" list="StaffList">
                      <dataSet id="StaffList" :array="data.users"></dataSet>
                    </div>
                    <div class="col-xs-6">
                      <input class="form-control" id="quickTaskType" type="text" placeholder="Type: Message, job, etc.." v-model="TaskType" list="TaskTypeList">
                      <dataSet id="TaskTypeList" :array="['support','onsite','messages','orders','sale-lead','projects']"></dataSet>
                    </div>
                  </div>

                  <div class="form-group row" v-if="TaskType == 'onsite'">
                    <div class="col-xs-6">
                      
                      <input class="form-control" id="quickTaskTime" type="time" placeholder="Format: 14:23" v-model="Time">
                    </div>
                    <div class="col-xs-6">
                      <input class="form-control" id="quickTaskDate" type="date" placeholder="Format: 30/12/2019" v-model="Date">
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-xs-12">
                    <input class="form-control" id="quickTaskCustomer" type="text" placeholder="Customer" v-model="Customer" list="customersList">
                    <dataSet id="customersList" :array="data.customers"></dataSet>
                    </div>
                  </div>

                  <div class="form-group row">
                    <div class="col-xs-12">
                      <textarea class="form-control" id="quickTaskText" v-model="text" placeholder="Description *" required rows="3"></textarea>
                    </div>
                  </div>
                    <!-- Send  button -->
                  <button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" @click="send($event)">Send</button>

                </form>
                <!-- Form -->

            </div>

        </div>
        <!-- Material form register -->

    </div>
  </div>
  <messenger
      v-if="added"
      title="task added"
      type="success"
     
    ></messenger> 
</span>
`;
import messenger from "./messenger.js";

import api from "../../api.js";
import dataSet from "../generic/dataSet.js";
export default {
  props: [],
  data: function() {
    return {
      text:'',
      title:'',
      cleanText:'',
      Staff:'',
      TaskType:'',
      Customer:'',
      Date:'',
      Time:'',
      open:false,
      data:{
        users:[]
      },
      added:false,
      toSend:{
        assigned_to:null,
        client_id:null,
        due_date:null,
        title:null,
        problem:null,
        severity_id:2,
        type:null,
        client_type:null
      },
      quickTaskShow: false,
    };
  },
  components: {
    dataSet,
    messenger
  },
  mounted(){
    this.load()
  },
  watch:{
    async Staff(){
      const user = await api.get.users({q:this.Staff})
      this.toSend.assigned_to = user.data[0].id 
    },
    async Customer(){
      const customers = await api.get.customers({q:this.Customer})
      const clients = await api.get.clients({q:this.Customer})
      const combo = [...customers.data,...clients.data]
      if(!combo[0]) return 
      this.toSend.client_id = combo[0].id 
      this.toSend.client_type = combo[0].type
    },
    text(){
      this.toSend.problem = this.text
    },
    Time(){
      this.toSend.due_date =  this.toSend.due_date || moment()
      const [hour,minute] = this.Time.split(':');
      
      this.toSend.due_date
          .set('hour', hour)
          .set('minute', minute)
    },
    TaskType(){
      this.toSend.type = this.TaskType
    },
    Date(){
      this.toSend.due_date =  this.toSend.due_date || moment();
      
      const [year,month,day] = this.Date.split('-');
      this.toSend.due_date
          .set('year', year)
          .set('month', month)
          .set('date', day);
    },
    title(){
      this.toSend.title = this.title
    }
  },
  methods: {
    async load(){
      const users = await api.get.users({limit:1000,active:true})
      this.data.users = users.data.map(el=>el.name)

      const customers = await api.get.customers({limit:1000})
      const clients  = await api.get.clients({limit:1000})

      this.data.customers = [
        ...customers.data.map(el=>el.name),
        ...clients.data.map(el=>el.name)
      ]
    },
    clear(){
      this.Staff = null;
      this.TaskType = null;
      this.Customer = null;
      this.Date = null;
      this.Time = null;
    },
    toggle(){
      this.open = !this.open
    },
    async send(event){
      if (event) {
        event.preventDefault()
      }
      
      // Validate required fields
      if (!this.title || !this.text) {
        alert('Please fill in all required fields (Title and Description)');
        return;
      }
      
      const task = await api.post.task({},this.toSend);
      this.added = !this.added
      if (task.type == 'projects') return
      window.location = `/tasks/${task.type}/${task.id}`
    }
  },
  template
};
