import {getDaysInMonth, getFirstDayInMonth, getWeekdaysForLocale} from "./utils.js";

class Calendar {
    constructor(calendarDiv, options = {locale: 'en-GB', firstDayInWeek: 'Sunday'}) {
        this.calendarDiv = calendarDiv
        this.options = options
        this.date = new Date(Date.now())
        // this.date = new Date(2021, 5, 12)
        console.log(this.date)
        this.visiableDays = 42

        this.locale = this.options.locale
        this.firstDayInWeek = this.options.firstDayInWeek

        this.weekdays = getWeekdaysForLocale(this.locale, 'long', this.firstDayInWeek)
        this.randomImgUrl = 'https://picsum.photos/1920/1080'
    }

    init() {
        const body = document.querySelector('body')
        if (body) {
            body.style.backgroundImage = 'url(' + this.randomImgUrl + ')'
            body.style.backgroundSize = 'cover'
            body.style.backgroundRepeat = 'no-repeat'
            body.style.backgroundPosition = 'center center'
        }
    }

    render() {
        const calendarHeader = this.calendarDiv.querySelector('#calendar__header')
        if (calendarHeader) {
            const yearDiv = calendarHeader.querySelector('#year')
            const monthDiv = calendarHeader.querySelector('#month')

            if (yearDiv) {
                yearDiv.innerText = Intl.DateTimeFormat(this.locale, {year: 'numeric'}).format(this.date)
            }

            if (monthDiv) {
                monthDiv.innerText = Intl.DateTimeFormat(this.locale, {month: 'long'}).format(this.date)
            }
        }

        const calendarBody = this.calendarDiv.querySelector('#calendar__body')
        if (calendarBody) {
            // Weekdays
            for (let i = 0; i < 7; i++) {
                const weekday = document.createElement('div')
                weekday.classList.add('day', 'weekday')
                weekday.textContent = this.weekdays[i]
                calendarBody.appendChild(weekday)
            }

            // Days
            const currentMonthDays = getDaysInMonth(this.date.getMonth(), this.date.getFullYear())
            const lastMonthDays = getDaysInMonth(this.date.getMonth() - 1, this.date.getFullYear())
            const nextMonthDays = getDaysInMonth(this.date.getMonth() + 1, this.date.getFullYear())
            const firstDayInMonth = getFirstDayInMonth(this.date.getMonth(), this.date.getFullYear())

            let daysAtEndOfMonth = this.visiableDays - currentMonthDays - firstDayInMonth + 1
            let daysAtStartOfMonth = this.visiableDays - daysAtEndOfMonth - currentMonthDays
            if (daysAtStartOfMonth < 0) {
                daysAtStartOfMonth = daysAtStartOfMonth + 7
                daysAtEndOfMonth = daysAtEndOfMonth - 7
            }
            console.log(daysAtStartOfMonth, daysAtEndOfMonth)

            for (let i = 0; i < this.visiableDays; i++) {
                const day = document.createElement('div')
                const dateSpan = document.createElement('span')
                dateSpan.id = 'date'
                day.classList.add('day', 'monthday')

                let visibleDate = i - daysAtStartOfMonth + 1

                // last month date
                if (i < daysAtStartOfMonth) {
                    visibleDate = lastMonthDays + visibleDate
                    day.classList.add('dim')
                }

                // next month date
                if (this.visiableDays - i - 1 < daysAtEndOfMonth) {
                    visibleDate = visibleDate - currentMonthDays
                    day.classList.add('dim')
                }

                dateSpan.innerText = visibleDate.toString()

                const dayId = `${this.date.getFullYear()}${this.date.getMonth()}${this.date.getDay()}`
                day.classList.add('day-' + dayId)

                day.appendChild(dateSpan)
                calendarBody.appendChild(day)
            }
        }
    }
}

export default Calendar;