<template>
    <section class="screen-window-picker-container" ref="contentContainer">
        <h2 class="title">{{ title }}</h2>
        <p class="desc">{{ desc }}</p>
        <div class="category-container">
            <div class="category" v-bind:class="{active:this.currentCategory === 'screen'}"
                 @click="setCategory('screen')">
                整个屏幕
            </div>
            <div class="category" v-bind:class="{active:this.currentCategory === 'window'}"
                 @click="setCategory('window')">
                窗口
            </div>
        </div>
        <div class="source-container">
            <div :key="source.id"
                 v-for="(source) in currentCategory === 'screen' ? screenSources : windowSources"
                 class="source"
                 v-bind:class="{active:selectedSource && selectedSource.id === source.id}"
                 @click="selectSource(source)"
                 @dblclick="share($event, source)"
            >
                <div class="thumbnail">
                    <img :src="toRaw(source).thumbnail.toDataURL()" alt="">
                </div>
                <div class="source-icon-name-container">
                    <img class="icon" v-if="source.appIcon" :src="toRaw(source).appIcon.toDataURL()" alt="">
                    <p class="name single-line">{{ source.name }}</p>
                </div>
            </div>
        </div>
        <div class="action-container">
            <button @click="share" v-bind:disabled="!this.selectedSource">
                分享
            </button>
            <button @click="cancel">
                取消
            </button>
        </div>
    </section>
</template>

<!--only for electron-->
<script>
import {ipcRenderer} from "../../platform";
import {toRaw} from "vue";
import IpcEventType from "../../ipcEventType";

export default {
    name: "ScreenOrWindowPicker",
    props: {
        title: {
            type: String,
            required: false,
            default: "选择要分享什么"
        },
        desc: {
            type: String,
            required: false,
            default: "WFC想分享您屏幕上的内容"
        },
        types: {
            type: Array,
            required: false,
            default: ['screen', 'window']
        }
    },
    data() {
        return {
            currentCategory: 'screen', // window
            selectedSource: '',
            screenSources: [],
            /*id: "window:94694:0"
            name: "微信 (聊天)"
            thumbnail: NativeImage {}
            display_id: ""
            appIcon: NativeImage {}
             */
            windowSources: [],
        }
    },

    methods: {
        toRaw,
        selectSource(source) {
            console.log('select', source)
            this.selectedSource = source;
        },
        setCategory(category) {
            if (this.currentCategory !== category) {
                this.currentCategory = category;
                this.selectedSource = null;

                let width = category === 'screen' ? '50%' : '33%';
                this.$refs.contentContainer.style.setProperty('--source-width', width);
            }
        },

        cancel() {
            this.$modal.hide('screen-window-picker-modal');
        },

        share(ev, source) {
            if (source) {
                this.selectedSource = source;
            }
            this.$modal.hide('screen-window-picker-modal',
                {
                    source: this.selectedSource,
                })
        }
    },

    mounted() {
        ipcRenderer.invoke(IpcEventType.GET_SOURCE, {types: this.types, thumbnailSize: {width: 200, height: 200}, fetchWindowIcons: true})
            .then(sources => {
                this.screenSources = sources.filter(source => source.id.startsWith('screen'))
                this.windowSources = sources.filter(source => source.id.startsWith('window'))
            });
    }

}
</script>

<style scoped lang="css">

.screen-window-picker-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 20px;
    --source-width: 50%
}

.category-container {
    display: flex;
}

.category {
    font-size: 16px;
    flex: 1;
    text-align: center;
    padding: 5px;
}

.category.active {
    color: #4168e0;
    border-bottom: 2px solid #4168e0;
}

.source-container {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    flex-wrap: wrap;
    overflow-y: scroll;
    border: 1px solid lightgrey;
    width: 100%;
}

.source {
    margin-top: 5px;
    width: var(--source-width);
    height: 200px;
    padding: 5px;
}

.source.active {
    border: 2px solid #4168e0;
}

.source .thumbnail {
    margin: 10px;
    height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.source .source-icon-name-container {
    padding: 10px;
    display: flex;
    flex-direction: row;
}

.source-icon-name-container .icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.action-container {
    display: flex;
    flex-direction: row-reverse;
}

.action-container button {
    padding: 10px 25px;
    border-radius: 3px;
    font-size: 15px;
    margin: 20px 0 0 10px;
    background: none;
}

.action-container button:active {
    color: #4168e0;
    border-color: #4168e0;
}

.action-container button.disabled {
}

</style>
