<template>
  <h2 class="tool-title">Unix timestamp</h2>
  <hr class="mt-5 mb-5">

  <table>
    <thead>
    <tr>
      <th>Format</th>
      <th>Date & Time</th>
      <th></th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(value, format) in currentTimestampFormatted" :key="format">
      <td>{{ format }}</td>
      <td>{{ value }}</td>
      <td>
        <button @click="copyTimestamp(value)">📋</button>
      </td>
    </tr>
    </tbody>
  </table>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="inputTimestamp">Enter timestamp</label>

    <div>
      <input id="inputTimestamp" type="number" v-model="toolData.inputTimestamp" :placeholder="currentTimestamp">
      <button @click="convertFromUnix">Convert ↓</button>
    </div>
  </div>

  <div class="input-group">
    <label>Enter Date & Time</label>

    <div>
      <table class="table-date-and-time">
        <thead>
        <tr>
          <th>Year</th>
          <th>Month</th>
          <th>Day</th>
          <th>Hour (24)</th>
          <th>Minute</th>
          <th>Second</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td><input type="number" v-model="toolData.inputYear"></td>
          <td><input type="number" v-model="toolData.inputMonth"></td>
          <td><input type="number" v-model="toolData.inputDay"></td>
          <td><input type="number" v-model="toolData.inputHour"></td>
          <td><input type="number" v-model="toolData.inputMinute"></td>
          <td><input type="number" v-model="toolData.inputSecond"></td>
          <td>
            <button @click="convertToUnix">Convert ↑</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import moment from "moment";

export default {
  data() {
    return {
      toolData: {
        inputTimestamp: "",
        inputYear: moment().year(),
        inputMonth: moment().month() + 1,
        inputDay: moment().day(),
        inputHour: moment().hour(),
        inputMinute: moment().minute(),
        inputSecond: moment().second()
      },
      currentTimestamp: 0,
      currentTimestampFormatted: {}
    };
  },
  mounted() {
    const updateCurrentTimestamp = () => {
      this.currentTimestamp = moment().unix();

      this.currentTimestampFormatted = {
        "UTC": moment().utc().format("YYYY-MM-DDTHH:mm:ss[Z]"),
        // 'UTC (local)': moment().format('YYYY-MM-DDTHH:mm:ssZZ'),
        // 'ISO 8601': moment().toISOString(),
        // 'RFC 2822': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
        // 'RFC 850': moment().format('dddd, DD-MMM-YY HH:mm:ss [UTC]'),
        // 'RFC 1036': moment().format('ddd, DD MMM YY HH:mm:ss ZZ'),
        // 'RFC 1123': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
        // 'RFC 822': moment().format('ddd, DD MMM YY HH:mm:ss ZZ'),
        // 'RFC 3339': moment().format('YYYY-MM-DDTHH:mm:ssZZ'),
        // 'COOKIE': moment().format('dddd, DD-MMM-YYYY HH:mm:ss [UTC]'),
        // 'RSS': moment().format('ddd, DD MMM YYYY HH:mm:ss ZZ'),
        "Unix Epoch": moment().unix(),
        "YYYY-DD-MM": moment().format("YYYY/MM/DD"),
        "SQL DATETIME": moment().toISOString().replaceAll(/[ZT]|(\.[0-9]{3})/g, " "),
        "YYYY/DD/MM HH:MM:SS AM/PM": moment().format("YYYY/MM/DD HH:mm:ss A")
        // 'DD.MM.YYYY HH:MM:SS': moment().format('DD.MM.YYYY HH:mm:ss'),
      };
    };
    updateCurrentTimestamp();

    setInterval(updateCurrentTimestamp, 1000);
  },
  methods: {
    convertFromUnix() {
      let timestamp = this.toolData.inputTimestamp.length ? this.toolData.inputTimestamp : this.currentTimestamp;

      const date = moment.unix(timestamp);

      this.toolData.inputYear = date.year();
      this.toolData.inputMonth = date.month() + 1;
      this.toolData.inputDay = date.day();
      this.toolData.inputHour = date.hour();
      this.toolData.inputMinute = date.minute();
      this.toolData.inputSecond = date.second();

    },
    convertToUnix() {
      const date = moment({
        year: this.toolData.inputYear,
        month: this.toolData.inputMonth - 1, // Months are 0-indexed
        day: this.toolData.inputDay,
        hour: this.toolData.inputHour,
        minute: this.toolData.inputMinute,
        second: this.toolData.inputSecond
      });

      this.toolData.inputTimestamp = date.unix();
    },
    copyTimestamp(text) {
      navigator.clipboard.writeText(text)
        .then(() => {
          // console.log('Timestamp copied to clipboard!');
        })
        .catch(err => {
          // console.error('Failed to copy: ', err);
        });
    }
  }
};
</script>

<style>
.table-date-and-time th {
  text-align: left;
}

.table-date-and-time td input {
  width: 80px;
}
</style>