<div id="calendar"></div>

<div class="modal" id="modal-template">
	<div class="modal__title">
		<label>タイトル： <input type="text" id="title"></label>
	</div>
	<div class="modal__color">
		<label>背景色： <input type="color" id="color"></label>
	</div>
	<div class="modal__times">
		<label>開始： <input type="date" id="start"></label>
		<label>終了： <input type="date" id="end"></label>
	</div>
      
	<div class="modal-action-buttons">
		<button class="modal-action-buttons__button save" id="save">保存</button>
		<button class="modal-action-buttons__button delete" id="delete">削除</button>
		<button class="modal-action-buttons close material-icons" id="cancel">cancel</button>
	</div>
</div>

.modal {
	display: none;
	flex-direction: column;
	align-items: center;
	padding: 1em;
	max-width: 250px;
	position: relative;
	background-color: #fff;
	border: 3px solid #f0f0f0;
	border-radius: 4px;
	
	&__title {
		margin-bottom: .5em;
		align-self: flex-start;

		input[type="text"] {
			width: 100px;
		}
		label {
			display: flex;
			align-items: center;
		}
	}
	
	&__color {
		margin-bottom: .5em;
		align-self: flex-start;
	}
	&__times {
		margin-bottom: 2em;

		& > * {
			margin-bottom: .5em;
			
			&:last-child {
				margin-bottom: 0;
			}
		}

		label {
			display: flex;
			align-items: center;
		}
	}
}

.modal-action-buttons {
	&__button {
		border: 2px solid #000;
		padding: .5em 1em;
		border-radius: 4px;
		background-color: transparent;
		cursor: pointer;
		transition: .25s;
	}
}

@mixin button( $color ) {
	color: $color;
	border-color: $color;

	&:hover {
		color: #fff;
		background-color: $color;
	}
}

.save {
	@include button( #2c75ff );
}

.delete {
	@include button( #dd1155 );
}

.close {
	cursor: pointer;
	border: none;
	background-color: transparent;
	position: absolute;
	top: 0;
	right: 0;
	transform: translate( 50%, -50% );
	transition: .15s;

	&:hover {
		opacity: .85;
		background-color: transparent ;
	}
}

input[type="date"] {
	padding: .5em 1em;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-weight: bold;
}

let calendar;
document.addEventListener( 'DOMContentLoaded', () => {
	const calendarEl = document.getElementById( 'calendar' );
	calendar = new FullCalendar.Calendar( calendarEl, {
    initialView: 'dayGridMonth',
	locale: 'local',
	timeZone: 'local',
	eventDisplay: 'block',
	displayEventTime: false,
	selectable: true,
	select: arg => {
		initEditModal( arg );
	},
	eventClick: arg => {
		console.log( arg );
		initEditModal( arg );
	},
  } );
  
  calendar.render();
} );

const initEditModal = data  => {
    removeAlreadyModal();
    const defModal = document.getElementById( 'modal-template' );
    const modal = defModal.cloneNode( true );
    modal.id = 'modal';

    setupModalPosition( modal, data.jsEvent );
    document.body.appendChild( modal );
	if ( data.event === undefined ) {
		document.querySelector( '#modal .delete' ).remove();
	}
	
	setupModalData( modal, data );

    registerEditModalEvent( modal, data );
};

const setupModalPosition = ( modal, e ) => {
    modal.style.display = 'flex';
    modal.style.position = 'absolute';
    modal.style.zIndex = 9999;

    const position = calcModalPosition( e );
    modal.style.left = `${position.x}px`;
    modal.style.top = `${position.y}px`;
};

const calcModalPosition = e => {
    const windowWidth = window.outerWidth;

    const y = e.pageY + 16;
    let x = e.pageX;

    if ( e.pageX <= 125 ) {
        x = e.pageX;
    } else if (  e.pageX > 125 && windowWidth - e.pageX > 125 ) {
        x = e.pageX - 125;
    } else if ( windowWidth - e.pageX <= 125 ) {
        x = e.pageX - 250;
    }

    return {
        x: x,
        y: y
    };
};

const removeAlreadyModal = () => {
    const modal = document.getElementById( 'modal' );
    if ( modal ) {
        modal.remove();
    }
};

// モーダル登録処理
const registerEditModalEvent = ( modal, arg ) => {
    const start = modal.querySelector( '#start' );
    const end = modal.querySelector( '#end' );
	const title = modal.querySelector( '#title' );
    const color = modal.querySelector( '#color' );
	
    // 保存
    const saveButton = modal.querySelector( '#save' );
    if ( saveButton ) {
        saveButton.addEventListener( 'click', e => {
            e.preventDefault();
			
			
			if ( arg.event !== undefined ) {
				// 変更時
				const endStrings = end.value && start.value !== end.value ? end.value.split( '-' ) : start.value.split( '-' );
				const endDate = new Date( endStrings[0], parseInt( endStrings[1] ) - 1, endStrings[2], 23, 59, 59 );

				arg.event.setStart( start.value );
				arg.event.setEnd( endDate );
				arg.event.setProp( 'title', title.value );
				arg.event.setProp( 'backgroundColor', color.value );
			} else {
				// 新規作成時
				const endStrings = end.value && start.value !== end.value ? end.value.split( '-' ) : start.value.split( '-' );
				const endDate = new Date( endStrings[0], parseInt( endStrings[1] ) - 1, endStrings[2], 23, 59, 59 );	
				calendar.addEvent( {
					start: start.value,
					end: endDate,
					title: title.value,
					backgroundColor: color.value
				} );
			}

            calendar.unselect();
            modal.remove();
        } );
    }

    // キャンセル
    const cancelButton = modal.querySelector( '#cancel' );
    cancelButton.addEventListener( 'click', e => {
        e.preventDefault();

        calendar.unselect();
        modal.remove();
    } );

    // 削除
    const deleteButton = modal.querySelector( '#delete' );
    if ( deleteButton ) {

        deleteButton.addEventListener( 'click', e => {
            e.preventDefault();
            arg.event.remove();
            calendar.unselect();
            modal.remove();
        } );
    }
};

// モダールに既存イベントを設定
const setupModalData = ( modal, data ) => {
    const start = modal.querySelector( '#start' );
    const end = modal.querySelector( '#end' );
	const title = modal.querySelector( '#title' );
    const color = modal.querySelector( '#color' );
	
	console.log( data );
	if ( data.event !== undefined ) {
		start.value = /T/.test( data.event.startStr ) ? data.event.startStr.split( 'T' )[0] : data.event.startStr;
		end.value = /T/.test( data.event.endStr ) ? data.event.endStr.split( 'T' )[0] : data.event.endStr;
		title.value = data.event.title;
		color.value = data.event.backgroundColor;
	} else {
		start.value = data.startStr;
		
		const diffTime = Math.abs( data.end - data.start );
		const diffDays = Math.ceil( diffTime / ( 1000 * 60 * 60 * 24 ) );
		if ( 1 < diffDays ) {
		
			const endDate = data.end;
			endDate.setDate( endDate.getDate() - 1 );
			end.value = formatDate( endDate );
		}
	}
    
};

// DateObject to YYYY-MM-DD
function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2) 
        month = '0' + month;
    if (day.length < 2) 
        day = '0' + day;

    return [year, month, day].join('-');
}