import { markRaw, defineAsyncComponent } from 'vue'
import translation from 'src/i18n'
import { langToLocale } from 'src/utils/languageUtils'

export default
{
  name: 'appointment',
  data: { dateTime: '', duration: 0, german: { title: '', place: '', person: '', freeText: '' }, english: { title: '', place: '', person: '', freeText: '' }, errors: [] },
  renderDesktop: (element, lang) => {
    const durationArray = element.data.duration.toString().split('.') // [hours, fraction of hours -> minutes]
    const durationHours = durationArray[0] > 0 ? `${durationArray[0]}` : `${durationArray[0]} ${translation[langToLocale(lang)].appointmentElement.hour}`
    const durationMinutes = durationArray[1] > 0 ? `${('0.' + durationArray[1]) * 60}` : ''

    // generate deeplinks if dateTime is in expected format DD.MM.YYYY HH:MM, else use default values
    let date = new Date()
    let endDate = new Date()
    let title = ''
    let location = ''
    let description = ''

    if (element.data.dateTime.match(/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/)) {
      date = new Date(element.data.dateTime.split(' ')[0].split('.').reverse().join('-') + 'T' + element.data.dateTime.split(' ')[1] + ':00')
      endDate = new Date(date.getTime() + element.data.duration * 60 * 60 * 1000)
      title = encodeURIComponent(element.data[lang].title)
      location = encodeURIComponent(element.data[lang].place)
      description = encodeURIComponent(element.data[lang].person + '-\n' + element.data[lang].freeText)
    }
    const outlookCom = `https://outlook.live.com/owa/?path=/calendar/action/compose&rru=addevent&startdt=${
                                                                                                          date.getFullYear() + '-' +// YYYY-
                                                                                                          String(date.getMonth() + 1).padStart(2, '0') + '-' + // MM-
                                                                                                          String(date.getDate()).padStart(2, '0') + 'T' + // DDT
                                                                                                          String(date.getHours()).padStart(2, '0') + ':' + // HH:
                                                                                                          String(date.getMinutes()).padStart(2, '0') + ':' + // MM:
                                                                                                          String(date.getSeconds()).padStart(2, '0') // SS
                                                                                                        }&enddt=${
                                                                                                          endDate.getFullYear() + '-' +// YYYY-
                                                                                                          String(endDate.getMonth() + 1).padStart(2, '0') + '-' + // MM-
                                                                                                          String(endDate.getDate()).padStart(2, '0') + 'T' + // DDT
                                                                                                          String(endDate.getHours()).padStart(2, '0') + ':' + // HH:
                                                                                                          String(endDate.getMinutes()).padStart(2, '0') + ':' + // MM:
                                                                                                          String(endDate.getSeconds()).padStart(2, '0') // SS
                                                                                                        }&subject=${title}&location=${location}&body=${description}`
    const googleCalendar = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${
                                                                                                          date.getFullYear() + // YYYY
                                                                                                          String(date.getMonth() + 1).padStart(2, '0') + // MM
                                                                                                          String(date.getDate()).padStart(2, '0') + // DD
                                                                                                          'T' +
                                                                                                          String(date.getHours()).padStart(2, '0') + // HH
                                                                                                          String(date.getMinutes()).padStart(2, '0') + // MM
                                                                                                          '00' + // SS
                                                                                                          '/' +
                                                                                                          endDate.getFullYear() + // YYYY
                                                                                                          String(endDate.getMonth() + 1).padStart(2, '0') + // MM
                                                                                                          String(endDate.getDate()).padStart(2, '0') + // DD
                                                                                                          'T' +
                                                                                                          String(endDate.getHours()).padStart(2, '0') + // HH
                                                                                                          String(endDate.getMinutes()).padStart(2, '0') + // MM
                                                                                                          '00' // SS
                                                                                                        }&location=${location}&details=${description}`
    const office365 = outlookCom.replace('outlook.live.com', 'outlook.office.com')

    return `
    <tr section="${element.id}">
      <td align="center">
          <table align="center" width="500px" style="border: 1px solid #46003A">
            <tr>
              <td align="center">
                <table>
                  <tr>
                      <td>
                          <table>
                              <tr>
                                  <td>
                                      <p style="font-size: 60px; padding-right: 10px; padding-left: 10px; margin:0px;">&#x1F551</p>
                                  </td>
                                  <td>
                                      <table align="center">
                                          <tr>
                                              <td>
                                                  <p style="padding-top: 5px; margin: 0px; margin-right:20px; word-break:break-all; max-width:450px; font-size: 22px;">${element.data[lang].title}</p>
                                              </td>
                                          </tr>
                                          <tr>
                                              <td>
                                                  <table>
                                                      <tr>
                                                          <td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.when}:</td>
                                                          <td style="padding: 0px; margin: 0px;">${element.data.dateTime}</td>
                                                      </tr>` + (element.data.duration > 0 ? `
                                                      <tr>
                                                          <td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.duration}:</td>
                                                          <td style="padding: 0px; margin: 0px;">
                                                            ${durationHours > 0
                                                              ? `${durationHours} ` +
                                                                (durationHours > 1
                                                                ? translation[langToLocale(lang)].appointmentElement.hours
                                                                : translation[langToLocale(lang)].appointmentElement.hour)
                                                              : ''}
                                                            ${durationMinutes > 0
                                                              ? `${durationMinutes} ` +
                                                                translation[langToLocale(lang)].appointmentElement.minutes
                                                              : ''}
                                                          </td>
                                                      </tr>
                                                      ` : '') + (element.data[lang].place ? `
                                                      <tr>
                                                          <td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.where}:</td>
                                                          <td style="padding: 0px; margin: 0px;">${element.data[lang].place}</td>
                                                      </tr>
                                                      ` : '') + (element.data[lang].person ? `
                                                      <tr>
                                                          <td style="padding: 0px; margin: 0px;">${translation[langToLocale(lang)].appointmentElement.who}:</td>
                                                          <td style="padding: 0px; margin: 0px;">${element.data[lang].person}</td>
                                                      </tr>
                                                      ` : '') + `
                                                  </table>
                                              </td>
                                          </tr>
                                      </table>
                                  </td>
                              </tr>
                          </table>
                      </td>
                  </tr>
                  ` + (element.data[lang].freeText ? `
                  <tr>
                      <td align="left" style="padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; margin: 0px;">
                          <p style="width:450px">${element.data[lang].freeText}</p>
                      </td>
                  </tr>
                  ` : '') + `
                  <tr>
                      <td align="center" valign="top" style="padding-left: 20px; padding-right: 10px; padding-top: 0px; padding-bottom: 20px; margin: 0px;">
                        <p style="padding: 0px; margin: 0px;">
                        <!-- insert deeplinks here -->
                          <a href="${outlookCom}" target="_blank" style="color: #000000; text-decoration: underline;">Outlook.com</a>&nbsp;|&nbsp;
                          <a href="${office365}" target="_blank" style="color: #000000; text-decoration: underline;">Office&nbsp;365</a>&nbsp;|&nbsp;
                          <a href="${googleCalendar}" target="_blank" style="color: #000000; text-decoration: underline;">Google Calendar</a>
                        </p>
                      </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
      </td>
  </tr>
  `
  },
  renderMobile: (element, lang) => {
    const durationArray = element.data.duration.toString().split('.') // [hours, fraction of hours -> minutes]
    const durationHours = durationArray[0] > 0 ? `${durationArray[0]}` : `${durationArray[0]} ${translation[langToLocale(lang)].appointmentElement.hour}`
    const durationMinutes = durationArray[1] > 0 ? `${('0.' + durationArray[1]) * 60}` : ''

    // generate deeplinks if dateTime is in expected format DD.MM.YYYY HH:MM, else use default values
    let date = new Date()
    let endDate = new Date()
    let title = ''
    let location = ''
    let description = ''

    if (element.data.dateTime.match(/^\d{2}\.\d{2}\.\d{4} \d{2}:\d{2}$/)) {
      date = new Date(element.data.dateTime.split(' ')[0].split('.').reverse().join('-') + 'T' + element.data.dateTime.split(' ')[1] + ':00')
      endDate = new Date(date.getTime() + element.data.duration * 60 * 60 * 1000)
      title = encodeURIComponent(element.data[lang].title)
      location = encodeURIComponent(element.data[lang].place)
      description = encodeURIComponent(element.data[lang].person + '-\n' + element.data[lang].freeText)
    }
    const outlookCom = `https://outlook.live.com/owa/?path=/calendar/action/compose&rru=addevent&startdt=${
      date.getFullYear() + '-' +// YYYY-
      String(date.getMonth() + 1).padStart(2, '0') + '-' + // MM-
      String(date.getDate()).padStart(2, '0') + 'T' + // DDT
      String(date.getHours()).padStart(2, '0') + ':' + // HH:
      String(date.getMinutes()).padStart(2, '0') + ':' + // MM:
      String(date.getSeconds()).padStart(2, '0') // SS
    }&enddt=${
      endDate.getFullYear() + '-' +// YYYY-
      String(endDate.getMonth() + 1).padStart(2, '0') + '-' + // MM-
      String(endDate.getDate()).padStart(2, '0') + 'T' + // DDT
      String(endDate.getHours()).padStart(2, '0') + ':' + // HH:
      String(endDate.getMinutes()).padStart(2, '0') + ':' + // MM:
      String(endDate.getSeconds()).padStart(2, '0') // SS
    }&subject=${title}&location=${location}&body=${description}`

    const googleCalendar = `https://calendar.google.com/calendar/render?action=TEMPLATE&text=${title}&dates=${
          date.getFullYear() + // YYYY
          String(date.getMonth() + 1).padStart(2, '0') + // MM
          String(date.getDate()).padStart(2, '0') + // DD
          'T' +
          String(date.getHours()).padStart(2, '0') + // HH
          String(date.getMinutes()).padStart(2, '0') + // MM
          '00' + // SS
          '/' +
          endDate.getFullYear() + // YYYY
          String(endDate.getMonth() + 1).padStart(2, '0') + // MM
          String(endDate.getDate()).padStart(2, '0') + // DD
          'T' +
          String(endDate.getHours()).padStart(2, '0') + // HH
          String(endDate.getMinutes()).padStart(2, '0') + // MM
          '00' // SS
        }&location=${location}&details=${description}`
    const office365 = outlookCom.replace('outlook.live.com', 'outlook.office.com')

    return `
    <tr section="${element.id}">
      <td align="center">
          <table align="center" width="800px"; style="border: 4px solid #46003A;">
              <tr>
                  <td>
                      <table>
                          <tr>
                              <td>
                                  <p style="font-size: 150px; padding-right: 10px; padding-left: 10px; margin:0px;">&#x1F551</p>
                              </td>
                              <td style="style="max-width:500px; word-break:break-all;">
                                  <table align="center">
                                      <tr>
                                          <td>
                                              <p style="padding-top: 5px; margin: 0px; font-size: 50px;">${element.data[lang].title}</p>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              <table>
                                                  <tr>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${translation[langToLocale(lang)].appointmentElement.when}:
                                                      </td>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${element.data.dateTime}
                                                      </td>
                                                  </tr>
                                                  ` + (element.data.duration > 0 ? `
                                                  <tr>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${translation[langToLocale(lang)].appointmentElement.duration}:
                                                      </td>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${durationHours > 0
                                                              ? `${durationHours} ` +
                                                              (durationHours > 1
                                                                  ? translation[langToLocale(lang)].appointmentElement.hours
                                                                  : translation[langToLocale(lang)].appointmentElement.hour)
                                                              : ''}
                                                          ${durationMinutes > 0
                                                              ? `${durationMinutes} ` +
                                                              translation[langToLocale(lang)].appointmentElement.minutes
                                                              : ''}
                                                      </td>
                                                  </tr>
                                                  ` : '') + (element.data[lang].place ? `
                                                  <tr>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${translation[langToLocale(lang)].appointmentElement.where}:
                                                      </td>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${element.data[lang].place}
                                                      </td>
                                                  </tr>
                                                  ` : '') + (element.data[lang].person ? `
                                                  <tr>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${translation[langToLocale(lang)].appointmentElement.who}:
                                                      </td>
                                                      <td style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          ${element.data[lang].person}
                                                      </td>
                                                  </tr>
                                                  ` : '') + `
                                              </table>
                                          </td>
                                      </tr>
                                  </table>
                              </td>
                          </tr>
                      </table>
                  </td>
              </tr>
              ` + (element.data[lang].freeText ? `
              <tr>
                  <td align="left" style="padding-left: 50px; padding-right: 50px; padding-top: 10px; padding-bottom: 10px; margin: 0px; font-size: 30px;">
                      <p>${element.data[lang].freeText}</p>
                  </td>
              </tr>
              ` : '') + `
              <tr>
                  <td align="center" valign="top" style="padding-left: 50px; padding-right: 50px; padding-top: 0px; padding-bottom: 20px; margin: 0px;">
                      <p style="padding: 0px; margin: 0px; font-size: 30px; text-align: center;">
                          <a href="${outlookCom}" target="_blank" style="color: #000000; text-decoration: underline;">Outlook.com</a>&nbsp;|&nbsp;
                          <a href="${office365}" target="_blank" style="color: #000000; text-decoration: underline;">Office&nbsp;365</a>&nbsp;|&nbsp;
                          <a href="${googleCalendar}" target="_blank" style="color: #000000; text-decoration: underline;">Google Calendar</a>
                      </p>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
    `
  },
  component: markRaw(defineAsyncComponent(() => import('src/components/NewsletterElements/AppointmentElement.vue'))
  )
}