export default class MonitorListRow extends HTMLTableRowElement {
    constructor() {
        super();
        this.downloadId = this.getAttribute('monitor-id');
        this.imdbId = this.getAttribute('imdb-id');
        this.mediaTitle = this.getAttribute('media-title');
        this.url = this.getAttribute('url');
        this.filename = this.getAttribute('filename');
        this.status = this.getAttribute('status');
        this.progress = this.getAttribute('progress');
        this.mediaType = this.getAttribute('media-type');
        this.episodeId = this.getAttribute('episode-id');
        this.createdAt = this.getAttribute('created-at');
        this.updatedAt = this.getAttribute('updated-at');
    }

    static get observedAttributes() {
        return ['download-id', 'imdb-id', 'media-title', 'url', 'filename', 'status', 'progress', 'media-type', 'episode-id', 'created-at', 'updated-at'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (oldValue !== newValue) {
            this[name] = newValue;
            this.setAttribute(name, newValue);
            this.setPreviewContent();
        }
    }

    setPreviewContent() {
        this.previewContent = `
        <table class="table-auto flex flex-row">
            <thead>
                <tr class="flex flex-col">
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">ID</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">IMDB ID</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Title</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Season</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Episode</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Status</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Search Count</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Media Type</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Episode ID</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Created At</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Updated At</div>
                    </th>
                    <th class="px-4 py-2">
                      <div class="dark:text-orange-500 text-right whitespace-nowrap ">Downloaded At</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="flex flex-col">
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('monitor-id') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('imdb-id') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-title') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('season') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('episode') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('status') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('search-count') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('media-type') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('episode-id') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('created-at') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('last-search') ?? "-"}</div>
                    </td>
                    <td class="px-4 py-2">
                      <div class="text-left dark:text-white whitespace-nowrap font-normal">${this.getAttribute('downloaded-at') ?? "-"}</div>
                    </td>
                </tr>
            </tbody>
        </table>
        `;
    }
}