<template>
    <div
        class="MockupSearch"
        :class="[ ...modifiersMap, { 'MockupSearch--map': isMap } ]"
        :style="{
            '--transition-duration': transitionDuration + 'ms'   
        }"
    >
        <div class="MockupSearch_browser">
            <span class="MockupSearch_browserDot"></span>
            <span class="MockupSearch_browserDot"></span>
            <span class="MockupSearch_browserDot"></span>
        </div>
        <div class="MockupSearch_body">
            <div class="MockupSearch_section MockupSearch_section--header">
                <icon name="studapart" :width="150" />

                <div class="MockupSearch_search">
                    <icon name="search" class="MockupSearch_searchIcon fill-bg-weak" :width="20"/>
                    
                    <tag-element v-for="tag in searchTags" :key="tag.id">
                        {{ tag.text }}
                    </tag-element>
                </div>
            </div>
            <transition-group class="MockupSearch_tagList MockupSearch_section" name="is-transition" tag="div">
                <tag-element class="MockupSearch_tag" v-for="tag in otherTags" :key="tag.id">
                    {{ tag.text }}
                </tag-element>
            </transition-group>
            <div class="MockupSearch_section">
                <slot></slot>
                <mockup-text class="MockupSearch_title" :lines="1" :width-range="[100, 100]" v-if="!$slots.default"/>
            </div>
            <div class="MockupSearch_section">
                <mockup-text class="MockupSearch_description" :lines="2" />
            </div>
            <div class="MockupSearch_results">
                <transition-group class="MockupSearch_container" name="is-transition" tag="div">
                    <div class="MockupSearch_block" v-for="element in elements" :key="element.id">
                        <mockup-block />
                    </div>
                </transition-group>

                <div class="MockupSearch_map" :style="{ backgroundImage: `url('${mapImage}')` }" v-if="isMap"></div>
            </div>
        </div>
    </div>
</template>

<script>
import MockupText from './mockup-text.vue'
import MockupBlock from './mockup-block.vue'
import mapImage from '../assets/img/map.png'

import TagElement from '@studapart/components-tag-element'
import Icon from '@studapart/components-icon'
import { ModifiersMap } from '@studapart/core'

export default {
    name: 'MockupSearch',
    mixins: [ ModifiersMap ],
    components: { Icon, MockupBlock, MockupText, TagElement },
    props: {
        elementsNumber: { type: Number, default: 10 },
        rerollProbability: { type: Number, default: 0.75 },
        transitionDuration: { type: Number, default: 500 },
        modifiers: { type: Array, default: () => [] },
        tags: { type: Array, default: () => [] },
        isMap: { type: Boolean, default: false },
        mapImage: { type: String, default: '' }
    },
    data: () => ({
        elements: [],
        state: {
            isAnimating: false
        }
    }),
    mounted () {
        this.initElements()
    },
    computed: {
        searchTags () {
            return this.$props.tags.filter(tag => tag.search)
        },
        otherTags () {
            return this.$props.tags.filter(tag => !tag.search)
        }
    },
    methods: {
        initElements () {
            let items = []

            for (let i = 0; i < this.$props.elementsNumber; i++) {
                items.push({
                    id: i
                })
            }

            this.$data.elements = items
        },
        rearrangeMasonry (reroll = this.$props.rerollProbability) {
            if (this.$data.state.isAnimating) return

            this.$data.state.isAnimating = true
            this.$data.elements = this.$data.elements.sort(() => .75 - Math.random())

            setTimeout(() => {
                this.$data.state.isAnimating = false
            }, this.$props.transitionDuration)
            
            if (reroll > 0) {
                setTimeout(() => {
                    this.$data.state.isAnimating = false
                    if (Math.random() < reroll) this.rearrangeMasonry(reroll / 3)
                }, this.$props.transitionDuration)
            }
        }
    }
}
</script>