<template>

		<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
			<div class="container mx-auto px-1 lg:px-4">
				<div class="flex flex-wrap justify-center text-center pt-4">
					<div class="w-full lg:w-6/12 px-4">
						<h2 class="text-2xl font-semibold uppercase">Profile</h2>
					</div>
				</div>
				<div class="flex flex-wrap items-center pt-8">
					<div class="w-full md:w-12/12 px-1 lg:px-4 mr-auto ml-auto">
						<TabGroup>
							<TabList class="flex space-x-1 rounded-xl bg-rose-medium p-1 sm:mx-44">
								<Tab as="template" :key="1" v-slot="{ selected }">
									<button :class="[
										'uppercase w-full rounded-lg py-2.5 font-medium leading-5 text-white text-lg',
										'ring-white ring-opacity-60 ring-offset-2 ring-offset-light-grey focus:outline-none focus:ring-2',
										selected
											? 'bg-main-purple shadow'
											: 'text-dark-grey hover:bg-white/[0.12]',
										]"
									>Schedule</button>
								</Tab>
								<Tab as="template" :key="2" v-slot="{ selected }">
									<button
										:class="[
										'uppercase w-full rounded-lg py-2.5 font-medium leading-5 text-white text-lg',
										'ring-white ring-opacity-60 ring-offset-2 ring-offset-light-grey focus:outline-none focus:ring-2',
										selected
											? 'bg-main-purple shadow'
											: 'text-dark-grey hover:bg-white/[0.12] hover:text-white',
										]"
									>Account</button>
								</Tab>
								<Tab as="template" :key="3" v-slot="{ selected }">
									<button
										:class="[
										'uppercase w-full rounded-lg py-2.5 font-medium leading-5 text-white text-lg',
										'ring-white ring-opacity-60 ring-offset-2 ring-offset-light-grey focus:outline-none focus:ring-2',
										selected
											? 'bg-main-purple shadow'
											: 'text-dark-grey hover:bg-white/[0.12] hover:text-white',
										]"
									>Contact</button>
								</Tab>
							</TabList>

							<TabPanels class="mt-2">
								<TabPanel :key="1" :class="['rounded-xl bg-white p-3', 'ring-white ring-opacity-60 ring-offset-2 focus:outline-none focus:ring-2',]">
									<div class="flex flex-wrap justify-center text-center pt-4">
										<div class="w-full lg:w-12/12">
											<h2 class="text-3xl font-semibold">Schedule Infomation</h2>
											<div class="flex flex-wrap pt-12">
												<FullCalendar
													id="calendar"
													class='w-full lg:min-w-[940px]'
													ref="calendarRef"
													:options='calendarOptions'
												>
													<template v-slot:eventContent='arg'>
													<b>{{ arg.timeText }}</b>
													<i>{{ arg.event.title }}</i>
													</template>
												</FullCalendar>
											</div>
										</div>
									</div>
								</TabPanel>
			
								<TabPanel :key="2" :class="['rounded-xl bg-white p-3', 'ring-white ring-opacity-60 ring-offset-2 focus:outline-none focus:ring-2',]">
									<div class="flex flex-wrap justify-center text-center pt-4">
										<div class="w-full lg:w-12/12">
											<h2 class="text-3xl font-semibold">Account / Store Infomation</h2>
											<div class="flex flex-wrap justify-between pt-12">
												<form class="w-full lg:w-6/12">
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-account-name">Account name</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-account-name" type="text" :value="user.username" disabled>
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-store-name">Store name</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-store-name" type="text" v-model="user.name">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-location-name">Location</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-location-name" type="text" v-model="user.address">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-opening-name">Opening hours</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-opening-name" type="text" v-model="user.optime">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-tel-name">Tel</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-tel-name" type="text" v-model="user.phone">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-fax-name">Fax</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-fax-name" type="text" v-model="user.fax">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3">
														<label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-map-name">Google Map URL</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-map-name" type="text" v-model="user.map">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-regist-name">Regist date</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-regist-name" type="text" :value="yyyymmdd(user.createdAt)" disabled>
														</div>
													</div>
													<div class="flex justify-end">
														<button @click="updateUser()" class="shadow bg-rose-500 hover:bg-rose-800 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
															Update
														</button>
													</div>
												</form>
				
												<form class="w-full lg:w-6/12">
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-current-password">Current Password</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-current-password" type="password" v-model="accountPassword.original">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-new-password">New Password</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-new-password" type="password" v-model="accountPassword.password">
														</div>
													</div>
													<div class="md:flex md:items-center mb-6">
														<div class="md:w-1/3"><label class="block text-medium-grey font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-confirm-password">Confirm Password</label></div>
														<div class="md:w-2/3">
															<input class="bg-light-grey appearance-none border-2 border-light-grey rounded w-full py-2 px-4 text-dark-grey leading-tight focus:outline-none focus:bg-white focus:border-main-purple" id="inline-confirm-password" type="password" v-model="accountPassword.confirm">
														</div>
													</div>
													<div class="flex justify-end">
														<button @click="changePassword()" class="shadow bg-rose-500 hover:bg-rose-800 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="button">
															Update
														</button>
													</div>
												</form>
											</div>
										</div>
									</div>
			
								</TabPanel>
								<TabPanel :key="3" :class="['rounded-xl bg-white p-3', 'ring-white ring-opacity-60 ring-offset-2 focus:outline-none focus:ring-2',]">
								....
								</TabPanel>
							</TabPanels>
						</TabGroup>
					</div>
				</div>
			</div>
		</section>

		<!-- toast alert 메세지 -->
		<Toast ref="toastRef" :content="content"></Toast>
</template>

<script setup>
import { ref } from 'vue'
import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'

</script>

<script>
import FullCalendar, { CalendarOptions, EventApi, DateSelectArg, EventClickArg } from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import { INITIAL_EVENTS, createEventId } from '@/services/utils/calendar-utils'
import moment from 'moment'

import UserService from "@/services/user.service";
import AuthService from "@/services/auth.service";

import Toast from "@/components/utils/Toast.vue";
import { mapState } from "vuex";


import { useBoardsStore } from '@/store/boards.js';
import { useSystemStore } from '@/store/system.js';


export default {
  name: "Profile",
  data() {
    return {
	  content: "",
	  boardsStore: useBoardsStore(),
      systemStore: useSystemStore(),
	  
	  user: {},
	  accountPassword: {
		username: "",
		original: "",
		password: "",
		confirm: ""
	  },

	  calendarOptions: {
        plugins: [
          dayGridPlugin,
          timeGridPlugin,
          interactionPlugin // needed for dateClick
        ],
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        initialView: 'timeGridWeek',
        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
        editable: true,
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        weekends: true,
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
        /* you can update a remote database when these fire:
        eventAdd:
        eventChange:
        eventRemove:
        */
      },
      currentEvents: []

    };
  },
  mounted() {
	// this.boardsStore.$subscribe((mutations, state) => {
    //   localStorage.setItem('data', JSON.stringify(state))
    // })
    // const storageData = localStorage.getItem("data")
    // if (storageData === null) {
    //   const jsonData = import("@/assets/json/data.json")
    //   this.boardsStore.boards = jsonData.boards;
    // } else {
    //   this.boardsStore.$state = JSON.parse(storageData)
    // }

	this.$nextTick(function () {
		this.$refs.target?.scrollIntoView();
	});
	UserService.findUserByUserName(this.currentUser.username).then(
      (response) => {
        this.user = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
  },
  unmounted(){
    this.systemStore.hideOverlay();
  },
  methods: {
	yyyymmdd(date) {
		return moment(date).format('YYYY-MM-DD');
    },
	updateUser() {
		console.log(this.user);
		UserService.updateUser(this.user).then(
			(response) => {
				this.content = "user updated.";
				this.$refs.toastRef.startShow();
			},
			(error) => {
				this.content =
				(error.response &&
					error.response.data &&
					error.response.data.message) ||
				error.message ||
				error.toString();
			}
		);
	},
	changePassword() {
		this.accountPassword.username = this.user.username;
		AuthService.update(this.accountPassword).then(
			(response) => {
				this.content = "password updated.";
				this.$refs.toastRef.startShow();
				this.accountPassword = {
					username: "",
					original: "",
					password: "",
					confirm: ""
				}
			},
			(error) => {
				this.content =
				(error.response &&
					error.response.data &&
					error.response.data.message) ||
				error.message ||
				error.toString();
			}
		);
	},
	handleWeekendsToggle() {
      this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
    },
    handleDateSelect(selectInfo) {
      let title = prompt('Please enter a new title for your event')
      let calendarApi = selectInfo.view.calendar
      calendarApi.unselect() // clear date selection
      if (title) {
        calendarApi.addEvent({
          id: calendarId++,
          title,
          start: selectInfo.startStr,
          end: selectInfo.endStr,
          allDay: selectInfo.allDay
        })
      }
    },
    handleEventClick(clickInfo) {
      if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
        clickInfo.event.remove()
      }
    },
    handleEvents(events) {
      this.currentEvents = events
    }

  },
  components: {
	Toast,
	FullCalendar
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

	currentUser() {
		return this.$store.state.auth.user.user;
    },
  },

};
</script>

<style>
  #calendar {
    max-width: 1400px;
    min-height: 500px;
    margin: 0 auto;
  }
  
  /*요일*/
  .fc-col-header-cell-cushion {
	color: #000;
  }
  .fc-col-header-cell-cushion:hover {
	text-decoration: none;
	color:#000;
  }
  /*일자*/
  .fc-daygrid-day-number{
	color: #000;
	font-size:1em;
  }
  
  /*종일제목*/
  .fc-event-title.fc-sticky{
    
  }
  /*more버튼*/ 
  .fc-daygrid-more-link.fc-more-link{
	color: #000;
  }
  /*일정시간*/
  .fc-daygrid-event > .fc-event-time{
	color:#000;
  }
  /*시간제목*/
  .fc-daygrid-dot-event > .fc-event-title{
    color:#000 !important;
  }
  /*가로 줄 - 월달력 종일 or 복수일자*/
  .fc-h-event{
	
  }
  /*세로 줄 - 주달력, 일달력*/
  .fc-v-event{
	
  }
  /*title 옆에 점*/
  .fc-daygrid-event-dot{
	
  }
  /*month/week/day*/
  .fc-button-active{
	border-color: #ffc107 		!important;
	background-color: #ffc107 	!important;
	color: #000 				!important;
	font-weight: bold 			!important;
  }
  /*노란버튼*/
  .btn-warning{
  	font-weight: bold;
  }
  /*모달 푸터*/
  .modal-footer{
  	display:inline-block;
  }
</style>