// TODO クリップボードから日付を入力


// 入力項目
type InputDate = {
    date: string; // 日
    time: string; // 時
    isRealtime: boolean;  // 現在時間と同期
    isValidDate: boolean; // 日付が正しい？
    isValidTime: boolean; // 時間が正しい？
};

// 日時の文字列
type DateString = {
    date: string;
    time: string;
};

// 結果
type Result = {
    isSuccess: boolean; // 計算した
    isAccurate: boolean;  // 単位別の結果に小数点を表示する
    diff: {
        isEqual: boolean; // 差なし
        isPositive: boolean;   // 正
        years: number;  // 年
        months: number; // 月
        days: number;   // 日
        minutes: number;    // 分
        seconds: number;    // 秒
    };  // 日時の差
    years: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 年
    months: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 月
    weeks: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 週
    days: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 日
    hours: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 時間
    minutes: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 分
    seconds: {
        isPositive: boolean;    // 正
        value: number;  // 値
    };  // 秒
    term: {
        start: DateString,
        end: DateString;
    };  // 期間の表示用
};

// データ
interface Data {
    start: InputDate;
    end: InputDate;
    moments: {
        start: Moment;
        end: Moment;
    };  // 入力された日時をMoment化したもの
    results: Result;
    tickEvent: Event;  // "今"のタイミングを合わせるためのイベント
};


// Vue.use(buefy); // この記述がなくても動く

const initialDate = moment().format('YYYY-MM-DD'); // 初期の日時
const url = 'https://codepen.io/phantom4/full/ewXWEV';   // このページのURL（codepenだとwindow.location.hrefが取得できない）

const data: Data = {
    // 開始
    start: {
        date: initialDate,
        time: '00:00:00',
        isRealtime: false,
        isValidDate: true,
        isValidTime: true
    },
    // 終了
    end: {
        date: initialDate,
        time: '00:00:00',
        isRealtime: false,
        isValidDate: true,
        isValidTime: true
    },
    moments: {
        start: null,
        end: null
    },
    results: {
        isSuccess: false,
        isAccurate: false,
        diff: {
            isEqual: false,
            isPositive: true,
            years: 0,
            months: 0,
            days: 0,
            minutes: 0,
            seconds: 0
        },
        years: {
            isPositive: true,
            value: 0
        },
        months: {
            isPositive: true,
            value: 0
        },
        weeks: {
            isPositive: true,
            value: 0
        },
        days: {
            isPositive: true,
            value: 0
        },
        hours: {
            isPositive: true,
            value: 0
        },
        minutes: {
            isPositive: true,
            value: 0
        },
        seconds: {
            isPositive: true,
            value: 0
        },
        term: {
            start: {
                date: '',
                time: ''
            },
            end: {
                date: '',
                time: ''
            }
        }
    },   // 結果
    tickEvent: new Event('tick')
};

const vm = new Vue({
    el: '#app',
    data,

    mounted: function () {
        // isRealtime = true のときに使用するタイマー
        // 個別にsetIntervalするとタイミングがずれるので、それを合わせるため
        setInterval(() => {
            this.$el.dispatchEvent(this.tickEvent);
        }, 500);
    },

    methods: {
        /**
         * 時間の差を計算する
         *
         * @return { from, to } 開始、終了をmomentにしたもの
         */
        calculate: function () {
            let result = false; // 処理結果

            if (
                this.start.isValidDate
                && this.start.isValidTime
                && this.end.isValidDate
                && this.end.isValidTime
            ) {
                const from = this.start.isValidDate && this.start.isValidTime ? moment(`${this.start.date} ${this.start.time}`, 'YYYY-MM-DD HH:mm:ss') : null;  // 開始
                const to = this.end.isValidDate && this.end.isValidTime ? moment(`${this.end.date} ${this.end.time}`, 'YYYY-MM-DD HH:mm:ss') : null;    // 終了

                if (from !== null && from.isValid() && to !== null && to.isValid()) {
                    const isPositive = to.diff(from) >= 0;   // 正の数値か
                    const isEqual = to.diff(from) === 0;    // 同じ時間か

                    // 分かりやすい形に計算
                    this.results.diff = isPositive ? {
                        isPositive,
                        isEqual,
                        years: to.diff(from, 'years'),
                        months: to.diff(from, 'months') % 12,
                        days: this.diffDays(from, to),  // 日数は計算が必要
                        hours: to.diff(from, 'hours') % 24,
                        minutes: to.diff(from, 'minutes') % 60,
                        seconds: to.diff(from, 'seconds') % 60
                    } : {
                        isPositive,
                        isEqual,
                        years: from.diff(to, 'years'),
                        months: from.diff(to, 'months') % 12,
                        days: this.diffDays(to, from),  // 日数は計算が必要
                        hours: from.diff(to, 'hours') % 24,
                        minutes: from.diff(to, 'minutes') % 60,
                        seconds: from.diff(to, 'seconds') % 60
                    };

                    // 単位別に計算する
                    const params = [
                        'years',
                        'months',
                        'weeks',
                        'days',
                        'hours',
                        'minutes',
                        'seconds'
                    ];

                    // TODO 小数点を含めるかUIで選択させる？
                    params.forEach((param) => {
                        this.results[param] = {
                            isPositive,
                            // value: Math.round(to.diff(from, param, true) * 1000) / 1000   // 小数点第3位で丸める
                            value: to.diff(from, param, this.results.isAccurate)
                        }
                    });

                    result = true;

                    // momentオブジェクトを保持
                    this.moments.start = from;
                    this.moments.end = to;

                    // 表記上の期間を設定する
                    const term = this.getTermForDisplay(from, to);
                    this.results.term.start = term.start;
                    this.results.term.end = term.end;
                }
            }

            if (result === false) {
                // 処理に失敗したのでmomentオブジェクトをクリア
                this.moments.start = null;
                this.moments.end = null;

                // 表記上の期間をクリアする
                this.clearTerm();
            }

            this.results.isSuccess = result;
        },

        /**
         * 開始日時を現在にする
         * 
         */
        toCurrentOfFrom: function () {
            const now = moment();
            this.start.date = now.format('YYYY-MM-DD');
            this.start.time = now.format('HH:mm:ss');
        },

        /**
         * 終了日時を現在にする
         * 
         */
        toCurrentOfTo: function () {
            const now = moment();
            this.end.date = now.format('YYYY-MM-DD');
            this.end.time = now.format('HH:mm:ss');
        },


        /**
         * 今日にする
         * @param target 
         */
        setToday: function (target: 'start' | 'end') {
            this[target].date = moment().format('YYYY-MM-DD');
        },

        /**
         * 現在時間にする
         * @param target 
         */
        setCurrentTime: function (target: 'start' | 'end') {
            this[target].time = moment().format('HH:mm:ss');
        },

        /**
         * 時間を設定する
         * @param target 
         * @param time HH:mm:ss
         */
        setTime: function (target: 'start' | 'end', time: string) {
            // 同期モードをオフにする
            this[target].isRealtime = false;

            this[target].time = time;
        },
        
        /**
         * 日付の操作
         * @param target 開始 or 終了
         * @param calc 増減
         * @param value 数値
         * @param unit 単位
         */
        calcDate: function (target: 'start' | 'end', calc: 'add' | 'subtract', value: number, unit: 'year' | 'month' | 'day') {
            const date = this[target].isValidDate ? moment(this[target].date) : moment();   // 日付を操作するmoment
            // 日付が無効な場合、今日にしておく

            // 同期モードをオフにする
            this[target].isRealtime = false;

            // 計算
            if (calc === 'add') {
                date.add(value, unit);
            }
            else if (calc === 'subtract') {
                date.subtract(value, unit);
            }

            this[target].date = date.format('YYYY-MM-DD');
        },
        
        /**
         * 時間の操作
         * @param target 開始 or 終了
         * @param calc 増減
         * @param value 数値
         * @param unit 単位
         */
        calcTime: function (target: 'start' | 'end', calc: 'add' | 'subtract', value: number, unit: 'hour' | 'minute' | 'second') {
            const date = this[target].isValidTime ? moment(this[target].time, 'HHmmss') : moment();   // 日付を操作するmoment
            // 日付が無効な場合、今日にしておく

            // 同期モードをオフにしておく
            this[target].isRealtime = false;

            // 計算
            if (calc === 'add') {
                date.add(value, unit);
            }
            else if (calc === 'subtract') {
                date.subtract(value, unit);
            }

            // this[target].date = date.format('YYYY-MM-DD');  // 日付も変更していく？
            this[target].time = date.format('HH:mm:ss');
        },

        /**
         * 日付のフォーマットになっているか＆日付として有効か
         * 
         * @param date 
         */
        isValidDate: function (date: string): boolean {
            const dateFormat = /^\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}$/; // 日付のフォーマット
            let result = false;

            if (dateFormat.test(date)) {
                const formatted = this.toDateFormat(date);

                if (formatted && moment(formatted, 'YYYY-MM-DD').isValid() === true) {
                    result = true;
                }
            }

            return result;
        },

        /**
         * 時間のフォーマットになっているか＆時間として有効か
         * 
         * @param time 
         */
        isValidTime: function (time: string): boolean {
            // ブラウザにより00秒のときに省略されることがある
            const timeFormat = /^\d{2}:\d{2}(:\d{2})?$/; // 時間のフォーマット
            let result = false;

            if (timeFormat.test(time)) {
                const nums = time.match(/\d+/g);    // 数字だけを取り出す
                const hours = Number(nums[0]);  // 時
                const seconds = Number(nums[1]);    // 分
                const minutes = Number(nums[2]) || 0;    // 秒

                if (0 <= hours && hours <= 23 && 0 <= seconds && seconds <= 59 && 0 <= minutes && minutes <= 59) {
                    result = true;
                }
            }

            return result;
        },

        /**
         * 日付っぽいフォーマットを日付に変換する（日付そのもののチェックはしない）
         *
         * @param date
         * @return フォーマットを変更した日付 or null（変換できなかった場合）
         */
        toDateFormat: function (date: string): string | null {
            const dateFormat = /^\d{4,}[^\d]\d{1,2}[^\d]\d{1,2}$/; // 検出する日付のフォーマット
            let result: string | null = null;

            if (dateFormat.test(date)) {
                const nums = date.match(/\d+/g);    // 数字だけを取り出す
                if (nums && nums.length === 3) {
                    const tmp = nums.map((num) => Number(num));    // 数値に変換する
                    const month = tmp[1];   // 月
                    const day = tmp[2]; // 日

                    // 月、日は簡易的にチェックする
                    if ((1 <= month && month <= 12) && (1 <= day && day <= 31)) {
                        // 日付のフォーマットにしてみる
                        result = `${tmp[0]}-${tmp[1]}-${tmp[2]}`;
                    }
                }
            }

            return result;
        },
        
        /**
         * 期間を表示用に最適化する
         * 
         */
        getTermForDisplay (start: Moment, end: Moment): { start: DateString, end: DateString } {
            const now = moment();
            const result = {
                start: {
                    date: '',
                    time: ''
                },
                end: {
                    date: '',
                    time: ''
                }
            };
            const isSameDay = start.format('YYYY/M/D') === end.format('YYYY/M/D');    // 開始日と終了日が同じか

            // 開始の日付
            result.start.date = start.format('YYYY/M/D');

            // 開始の時間
            if (start.format('Hms') !== '000' || isSameDay) {
                // 0秒なら秒を省略
                result.start.time = (start.format('s') !== '0') ? start.format('H:mm:ss') : start.format('H:mm');
            }
            else {
                // 1日以上の差があって、0:00:00 なら時間を省略
            }
            

            // 終了の日付
            if (end.format('YYYY') === start.format('YYYY')) {
                if (isSameDay === false) {
                    // 同じ年は年を省略
                    result.end.date = end.format('M/D');
                }
                else {
                    // 開始日と終了日が同じなら省略
                }
            }
            else {
                result.end.date = end.format('YYYY/M/D');
            }

            // 終了の時間
            if (end.format('Hms') !== '000' || result.end.date === '') {
                // 0秒なら秒を省略
                result.end.time = (end.format('s') !== '0') ? end.format('H:mm:ss') : end.format('H:mm');
            }
            else {
                // 日付があって、0:00:00 なら時間を省略
            }

            return result;
        },

        /**
         * 期間の表示をクリアする
         * 
         */
        clearTerm () {
            this.results.term.start = {
                date: '',
                time: ''
            };
            this.results.term.end = {
                date: '',
                time: ''
            };
        },

        /**
         * 日数の差を計算する
         * 
         * @param from 開始
         * @param to 終了
         */
        diffDays (from: Moment, to: Moment): number {
            const diffMonths = to.diff(from, 'months');   // 開始日時と終了日時の月の差
            const progress = from.clone().add(diffMonths, 'month');  // 月の差の分だけ進めた日時
            
            // TODO 月末をまたぐときに日数が飛ぶことがあるので対策が必要かも
            // でも正解も分からない
            // 2018/02/02 -> 2019/02/01 = 11ヶ月30日
            // 2018/02/28 -> 2019/02/27 = 11ヶ月30日
            // 2018/03/01 -> 2019/02/28 = 11ヶ月27日    // 1日ずつ進めただけなのに日数が違う
            // 2018/03/02 -> 2019/03/01 = 11ヶ月27日

            return to.diff(progress, 'days');   // 1ヶ月未満の日数の差
        },

        /**
         * うるう年か
         * @param year 
         */
        isLeapYear (year: number): boolean {
            return (year >= 4) ? year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0) : false;
        }
    },

    computed: {
        /**
         * 共有URL
         * 
         */
        shareURL: function () {
            return (this.start.isValidDate && this.start.isValidTime && this.end.isValidDate && this.end.isValidTime && this.moments.start && this.moments.end) ? `${url}?from=${this.start.isRealtime ? 'now' : this.moments.start.format('YYYYMMDDHHmmss')}&to=${this.end.isRealtime ? 'now' : this.moments.end.format('YYYYMMDDHHmmss')}` : '';
        }
    },

    watch: {
        'start.date': function (val: string) {
            this.start.isValidDate = this.isValidDate(val); // input type="date"が機能しないMac safari用
            this.calculate();
        },

        'start.time': function (val: string) {
            this.start.isValidTime = this.isValidTime(val);  // input type="time"が機能しないMac safari用
            this.calculate();
        },

        'end.date': function (val: string) {
            this.end.isValidDate = this.isValidDate(val);    // input type="date"が機能しないMac safari用
            this.calculate();
        },

        'end.time': function (val: string) {
            this.end.isValidTime = this.isValidTime(val);   // input type="time"が機能しないMac safari用
            this.calculate();
        },

        'results.isAccurate': function (val: boolean) {
            this.calculate();
        },

        'start.isRealtime': function (val: boolean) {
            // リアルタイムで時間同期
            if (val === true) {
                this.$el.addEventListener('tick', this.toCurrentOfFrom);
            }
            else {
                this.$el.removeEventListener('tick', this.toCurrentOfFrom);
            }
        },

        'end.isRealtime': function (val: boolean) {
            // リアルタイムで時間同期
            if (val === true) {
                this.$el.addEventListener('tick', this.toCurrentOfTo);
            }
            else {
                this.$el.removeEventListener('tick', this.toCurrentOfTo);
            }
        }
    },

    filters: {
        /**
         * 数字を0パディング
         * 
         * @param num 数値
         * @param digits 桁数
         */
        zeroPadding: function (num: number, digits: number) {
            // return String(num).padStart(digits);   // not work for IE11
            return _.padStart(String(num), digits, '0');
        },

        /**
         * 3桁カンマ区切りにする
         * 
         * @param val 
         */
        toLoaleString: function (val: number) {
            return Number(val).toLocaleString();
        }
    }
});


// クエリーを開始＆終了に反映させる
const queryParams = {};	//文字列クエリー
const params = window.location.search.replace(/^\?/, '').split("&"); // クエリー
const format = /\d{14}/;    // クエリーと判断するフォーマット（YYYYMMDDHHmmss）

for(let i = 0, l = params.length; i < l; i++) {
    const pair = params[i].split("=");
    queryParams[pair[0]] = pair[1] || "";
}

[{
    key: 'from',
    dest: 'start'
}, {
    key: 'to',
    dest: 'end'
}].forEach(function (item) {
    const param = queryParams[item.key];

    if (param) {
        if (param === 'now') {
            // 現在時間に設定
            vm.$data[item.dest].isRealtime = true;
        }
        else if (format.test(param) === true) {
            // 指定時間に設定
            // momentで日付として正しいか確認しておく
            const date = moment(`${param.substr(0, 4)}-${param.substr(4, 2)}-${param.substr(6, 2)} ${param.substr(8, 2)}:${param.substr(10, 2)}:${param.substr(12, 2)}`, 'YYYY-MM-DD HH:mm:ss');
            if (date.isValid()) {
                vm.$data[item.dest].date = date.format('YYYY-MM-DD');
                vm.$data[item.dest].time = date.format('HH:mm:ss');
            }
        }
    }
});



// 共有URLのコピー
new ClipboardJS('#copy-share-url');

// コピーしたときのツールチップ
tippy('#copy-share-url', {
  content: 'copied!',
  trigger: 'click',
  placement: 'top'
});