<template>
  <el-row :gutter="20">
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
    <el-col :span="16">
      <el-card style="width: 100%">
        <template #header>
          <div class="card-header">
            <span>Your Wishlist Information</span>
          </div>
        </template>

        <div class="common-layout">
          <el-container>
            <!-- Aside Coding Area -->
            <el-aside width="300px">
              <el-space direction="vertical" width="100%">
                <el-card
                  v-for="(item, index) in wishlistList.value"
                  shadow="hover"
                  style="width: 280px"
                  @click="selectItem(index)"
                >
                  <span>{{ item.cityName }}</span>
                  <div class="bottom">
                    <time class="time"
                      >"{{ item.startTime }} to {{ item.endTime }}"</time
                    >
                  </div>
                </el-card>
                <el-card
                  shadow="hover"
                  style="width: 280px"
                  @click="addNewWishlistItem()"
                >
                  <el-icon><Plus /></el-icon>
                  <span> + Add New Item To Wishlist</span>
                </el-card>
              </el-space>
            </el-aside>
            <!-- Main Coding Area -->
            <el-main>
              <el-card shadow="never" class="main-card">
                <span>Wishlist Item Detail</span>
                <el-form
                  ref="ruleFormRef"
                  :model="wishlistItem"
                  :rules="rules"
                  label-width="120px"
                  :label-position="'left'"
                  class="demo-ruleForm"
                  :size="formSize"
                  status-icon
                >
                  <el-form-item></el-form-item>

                  <el-form-item label="City Name:" prop="cityName">
                    <el-input v-model="wishlistItem.cityName" />
                  </el-form-item>

                  <el-form-item label="Zip Code:" prop="zipCode">
                    <el-input v-model="wishlistItem.zipCode" />
                  </el-form-item>

                  <el-form-item label="State:" prop="state">
                    <el-select
                        v-model="wishlistItem.state"
                        placeholder="Please select state">
                      <el-option v-for="(state_item, index) in USA_STATE_INITAL_LIST"
                                 :label="state_item" :value="state_item" />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="Trip Start Time" required>
                    <el-form-item prop="startTime">
                      <el-date-picker
                        v-model="wishlistItem.startTime"
                        type="date"
                        label="Pick a date"
                        placeholder="Pick a date"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label="Trip End Time" required>
                    <el-form-item prop="endTime">
                      <el-date-picker
                        v-model="wishlistItem.endTime"
                        type="date"
                        label="Pick a date"
                        placeholder="Pick a date"
                        style="width: 100%"
                      />
                    </el-form-item>
                  </el-form-item>

                  <el-form-item label="Details:" prop="details">
                    <el-input
                      v-model="wishlistItem.details"
                      type="textarea"
                      placeholder="Trip plan or want to visit places..."
                    />
                  </el-form-item>

                  <el-button type="primary" @click="submitForm(ruleFormRef)"
                    >Create</el-button
                  >
                  <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form>
              </el-card>
            </el-main>
          </el-container>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { WishlistItemModel } from "@/models/WishlistItemModel";
import * as WishlistService from "@/services/WishlistService";
import { USA_STATE_INITAL_LIST } from "@/services/Constans";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  cityName: [
    {
      required: true,
      message: "Please give which city you want to visit.",
      trigger: "blur",
    },
    { min: 0, max: 20, message: "Length should be 0 to 20", trigger: "blur" },
  ],
  zipCode:[
    {
      required: true,
      message: "Please give the stat of the city located.",
      trigger: "blur",
    },
  ],
  state: [
    {
      required: true,
      message: "Please give the stat of the city located.",
      trigger: "blur",
    },
  ],
  startTime: [
    {
      type: "date",
      required: true,
      message: "Please pick a date",
      trigger: "change",
    },
  ],
  endTime: [
    {
      type: "date",
      required: true,
      message: "Please pick a time",
      trigger: "change",
    },
  ],
});

// TODO: uncomment it when API connection ready
const userId = 233;
const wishlistList = reactive({value:[]});
const wishlistItem = ref(new WishlistItemModel());
wishlistItem.value.wishlistItemId = null;

onMounted(() => {
  WishlistService.getUserWishlistInfo(userId).then((data)=>{
    console.log("Receiving wishlist list data", data);
    if(data["data"] === null){
      wishlistList.value = [];
    }else{
      wishlistList.value
      wishlistList.value = data["data"];
    }
  })

})



function selectItem(idx: number) {
  console.log("Selected wishlist Item: " + idx);
  wishlistItem.value = reactive(wishlistList.value[idx]);
}

function addNewWishlistItem() {
  // TODO: disable it when it already displays the form
  console.log("addNewWishlistItem");
  wishlistItem.value = new WishlistItemModel();
  wishlistItem.value.wishlistItemId = null;
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      WishlistService.createNewWishlistItem( userId, wishlistItem.value).then((data)=>{
        console.log("Receiving create wishlist item data", data);
        if(data["data"] === null){
          // TODO: create failed, handle it later
        }else{
          wishlistItem.value = data["data"];
          wishlistList.value.push(data["data"]);
        }
      })
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
    console.log(wishlistItem.value);
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  // TODO: make it delete to testing, need to change it back
  // if (!formEl) return;
  // formEl.resetFields();
  if(wishlistItem.value.wishlistItemId !== null){
    WishlistService.deleteWishlistItem(userId, wishlistItem.value.wishlistItemId).then((data)=>{
      console.log("Delete wishlist item", data);
      if(data["data"] === null){
        // TODO: delete failed or something wrong
      }else{
        wishlistList.value=data["data"];
        addNewWishlistItem();
      }
    })
  }

};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
</script>

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-main {
  --el-main-padding: 0px 20px 20px 20px;
}

.main-card {
  padding: 0 0 0 20px;
}
</style>