//Not used for Now

<!-- <script type="text/x-template" id="installed-themes">
    <div class="installed-themes-page">
        <div class="gh-header">
            <div class="row">
                <div class="col nopadding">
                    <h1 class="header-text">
                        {{ $root.getLz("settings.option.visual.theme.manageStyles") }}
                    </h1>
                </div>
                <div class="col-auto nopadding flex-center">
                    <button class="md-btn md-btn-small md-btn-block" @click="$root.appRoute('themes-github')">
                        {{$root.getLz('settings.option.visual.theme.github.explore')}}
                    </button>
                </div>
                <div class="col-auto  flex-center">
                    <button class="md-btn md-btn-small md-btn-block" @click="$root.checkForThemeUpdates()">
                        {{ $root.getLz('settings.option.visual.theme.checkForUpdates') }}
                    </button>
                </div>
                <div class="col-auto nopadding flex-center">
                    <button class="md-btn md-btn-small md-btn-block" @click="openThemesFolder()">
                        {{$root.getLz('settings.option.visual.theme.github.openfolder')}}
                    </button>
                </div>
            </div>
        </div>
        <div class="gh-content">
            <div class="repos-list">
                <div class="repo-header">
                    <h4>{{$root.getLz('settings.option.visual.theme.github.available')}}</h4>
                </div>
                <ul class="list-group list-group-flush">
                    <template v-for="theme in themes">
                        <li @click="addStyle(theme.file)"
                        @contextmenu="contextMenu($event, theme)"
                        class="list-group-item list-group-item-dark"
                        :class="{'applied': $root.cfg.visual.styles.includes(theme.file)}">

                            <b-row>
                                <b-col class="themeLabel">{{theme.name}}</b-col>
                                <template v-if="$root.cfg.visual.styles.includes(theme.file)">
                                    <b-col sm="auto" v-if="theme.pack">
                                        <button class="themeContextMenu codicon codicon-package"></button>
                                    </b-col>
                                    <b-col sm="auto">
                                        <button class="themeContextMenu codicon codicon-check"></button>
                                    </b-col>
                                </template>
                                <template v-else>
                                    <b-col sm="auto" v-if="theme.pack">
                                        <button class="themeContextMenu codicon codicon-package"></button>
                                    </b-col>
                                    <b-col sm="auto">
                                        <button @click.stop="contextMenu($event, theme)" class="themeContextMenu codicon codicon-list-unordered"></button>
                                    </b-col>
                                </template>

                            </b-row>
                        </li>
                        <li @click="addStyle(packEntry.file)"
                        @contextmenu="contextMenu($event, theme)"
                        class="list-group-item list-group-item-dark addon"
                        v-for="packEntry in theme.pack"
                        :class="{'applied': $root.cfg.visual.styles.includes(packEntry.file)}"
                        v-if="theme.pack">

                        <b-row>
                            <b-col class="themeLabel">{{packEntry.name}}</b-col>
                            <template v-if="$root.cfg.visual.styles.includes(packEntry.file)">
                                <b-col sm="auto">
                                    <button class="themeContextMenu codicon codicon-check"></button>
                                </b-col>
                            </template>
                            <template v-else>
                                <b-col sm="auto">
                                    <button class="themeContextMenu codicon codicon-diff-added"></button>
                                </b-col>
                            </template>
                        </b-row>
                    </li>
                    </template>
                </ul>
            </div>

            <div class="style-editor-container">
                <div class="repo-header">
                    <h4>{{ $root.getLz("settings.option.visual.theme.github.applied") }} </h4>
                </div>
                <stylestack-editor ref="stackEditor"  v-if="themes.length != 0" :themes="themes"/>
            </div>
        </div>
    </div>
</script>

<script>
    // do not translate
    Vue.component('stylestack-editor', {
        /*html*/
        template: `
            <div class="stylestack-editor" >
                <draggable class="list-group" v-model="$root.cfg.visual.styles" @end="$root.reloadStyles()">
                    <b-list-group-item variant="dark" v-for="theme in $root.cfg.visual.styles" :key="theme">
                        <b-row>
                            <b-col sm="auto">
                                <div class="handle codicon codicon-grabber"></div>
                            </b-col>
                            <b-col class="themeLabel">{{getThemeName(theme)}}</b-col>
                            <b-col sm="auto">
                                <button class="removeItem codicon codicon-close" @click="remove(theme)"></button>
                            </b-col>
                        </b-row>
                        </b-list-group-item>
                </draggable>
            </div>
        `,
        props: {
            themes: {
                type: Array,
                default: [],
                required: true
            }
        },
        data: function () {
            return {
                selected: null,
                newTheme: null,
                themeList: []
            }
        },
        mounted() {
            console.log(this.themes)
            this.themeList = [...this.themes]

            this.themeList.forEach(theme => {
                if (theme.pack) {
                    theme.pack.forEach(packEntry => {
                        packEntry.file = theme.file.replace('index.less', '') + packEntry.file
                        this.themeList.push(packEntry)
                    })
                }
            })
        },
        methods: {
            gitHubExplore() {
                this.$root.appRoute("themes-github")
            },
            getThemeName(filename) {
                try {
                    return this.themeList.find(theme => theme.file === filename).name;
                } catch (e) {
                    return filename;
                }
            },
            moveUp() {
                const styles = this.$root.cfg.visual.styles
                const index = styles.indexOf(this.selected)
                if (index > 0) {
                    styles.splice(index, 1)
                    styles.splice(index - 1, 0, this.selected)
                }
                this.$root.reloadStyles()
            },
            moveDown() {
                const styles = this.$root.cfg.visual.styles
                const index = styles.indexOf(this.selected)
                if (index < styles.length - 1) {
                    styles.splice(index, 1)
                    styles.splice(index + 1, 0, this.selected)
                }
                this.$root.reloadStyles()
            },
            remove(style) {
                const styles = this.$root.cfg.visual.styles
                const index = styles.indexOf(style)
                styles.splice(index, 1)
                this.$root.reloadStyles()
            },
            addStyle(style) {
                const styles = this.$root.cfg.visual.styles
                styles.push(style)
                this.$root.reloadStyles()
            }
        }
    })
</script>

<script>
    Vue.component('installed-themes', {
        template: "#installed-themes",
        props: [],
        data: function () {
            return {
                repos: [],
                openRepo: {
                    id: -1,
                    name: '',
                    description: '',
                    html_url: '',
                    stargazers_count: 0,
                    owner: {
                        avatar_url: ''
                    },
                    readme: ""
                },
                themesInstalled: [],
                themes: []
            }
        },
        mounted() {
            this.getThemesList();
        },
        methods: {
            getThemesList() {
                let self = this
                let themes = ipcRenderer.sendSync("get-themes")
                themes.unshift({
                    name: "Acrylic Grain",
                    file: "grain.less"
                })
                themes.unshift({
                    name: "Sweetener",
                    file: "sweetener.less"
                })
                themes.unshift({
                    name: "Reduce Visuals",
                    file: "reduce_visuals.less"
                })
                // themes.unshift({
                //     name: "Inline Drawer",
                //     file: "inline_drawer.less"
                // })
                themes.unshift({
                    name: "Dark",
                    file: "dark.less"
                })
                this.themes = themes
            },
            contextMenu(event, theme) {
                let self = this
                let menu = {
                    items: {
                        "uninstall": {
                            name: app.getLz("settings.option.visual.theme.uninstall"),
                            disabled: true,
                            action: () => {
                                app.confirm(app.stringTemplateParser(app.getLz("settings.prompt.visual.theme.uninstallTheme"), {
                                    theme: theme.name ?? theme.file
                                }), (res) => {
                                    if (res) {
                                        console.debug(theme)
                                        ipcRenderer.once("theme-uninstalled", (event, args) => {
                                            console.debug(event, args)
                                            self.getThemesList()
                                        })
                                        ipcRenderer.invoke("uninstall-theme", theme.path)
                                    }
                                })

                            }
                        },
                        "viewInfo": {
                            name: app.getLz("settings.option.visual.theme.viewInfo"),
                            disabled: true,
                            action: () => {

                            }
                        }
                    }
                }
                if (theme.path) {
                    menu.items.uninstall.disabled = false
                }
                this.$root.showMenuPanel(menu, event)
            },
            openThemesFolder() {
                ipcRenderer.invoke("open-path", "themes")
            },
            getInstalledThemes() {
                let self = this
                const themes = ipcRenderer.sendSync("get-themes")
                // for each theme, get the github_repo property and push it to the themesInstalled array, if not blank
                themes.forEach(theme => {
                    if (theme.github_repo !== "" && typeof theme.commit != "") {
                        self.themesInstalled.push(theme.github_repo.toLowerCase())
                    }
                })
            },
            addStyle(filename) {
                this.$refs.stackEditor.addStyle(filename)
            },
            showRepo(repo) {
                const self = this
                const readmeUrl = `https://raw.githubusercontent.com/${repo.full_name}/main/README.md`;
                var requestOptions = {
                    method: 'GET',
                    redirect: 'follow'
                };

                fetch(readmeUrl, requestOptions)
                    .then(response => response.text())
                    .then(result => {
                        self.openRepo = repo
                        self.openRepo.readme = self.convertReadMe(result);
                    })
                    .catch(error => {
                        self.openRepo = repo
                        self.openRepo.readme = `This repository doesn't have a README.md file.`;
                        console.log('error', error)
                    });
            },
            convertReadMe(text) {
                return marked.parse(text)
            },
            installThemeRepo(repo) {
                let self = this
                let msg = app.stringTemplateParser(app.getLz('settings.option.visual.theme.github.install.confirm'), {
                    repo: repo.full_name
                });
                app.confirm(msg, (res) => {
                    if (res) {
                        ipcRenderer.once("theme-installed", (event, arg) => {
                            if (arg.success) {
                                self.themes = ipcRenderer.sendSync("get-themes")
                                self.getInstalledThemes()
                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
                            } else {
                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
                            }
                        });
                        ipcRenderer.invoke("get-github-theme", repo.html_url)
                    }
                })
            },
            installThemeURL() {
                let self = this
                app.prompt(app.getLz('settings.prompt.visual.theme.github.URL'), (result) => {
                    if (result) {
                        ipcRenderer.once("theme-installed", (event, arg) => {
                            if (arg.success) {
                                self.themes = ipcRenderer.sendSync("get-themes")
                                notyf.success(app.getLz('settings.notyf.visual.theme.install.success'));
                            } else {
                                notyf.error(app.getLz('settings.notyf.visual.theme.install.error'));
                            }
                        });
                        ipcRenderer.invoke("get-github-theme", result)
                    }
                });
            },
            getRepos() {
                let self = this
                var requestOptions = {
                    method: 'GET',
                    redirect: 'follow'
                };

                app._fetch("https://api.github.com/search/repositories?q=topic:cidermusictheme fork:true", requestOptions)
                    .then(response => response.text())
                    .then(result => {
                        let items = JSON.parse(result).items
                        self.repos = items
                    })
                    .catch(error => console.log('error', error));
            }
        }
    })
</script> -->