# vue/app/pages/Contacts/index.coffee
document.head.insertAdjacentHTML('beforeend','<style type="text/tailwindcss"  page="Contacts">'+stylFns['app/pages/Contacts/index.styl']+'</style>')

module.exports =
    name: 'Contacts'
    render: (new Function '_ctx', '_cache', renderFns['app/pages/Contacts/index.pug'])()
    data: ->
        contactInfo:
            phone: '+992 372 27 09 46'
            address: 'просп. Исмоила Сомони, 26'
            map: {}
            director: 'Джумахон Розикзода'
            deputyDirector: 'Азимов Махмадюсуф'
        workingHours: [
            { days: 'Понедельник - Пятница', hours: '9:00 - 18:00' }
            { days: 'Суббота', hours: '10:00 - 16:00' }
            { days: 'Воскресенье', hours: 'Выходной' }
        ]
        transportInfo:
            buses: ['1', '2', '3', '4', '8', '12', '18']
            minibuses: ['1', '2', '3', '4', '8', '12', '18', '27', '34']
    mounted: ->
        @setupAnimations()
        debug.log "Contacts page mounted"
        marker = new ol.Feature
            geometry: new ol.geom.Point(ol.proj.fromLonLat([68.762398,38.582698]))
        marker.setStyle new ol.style.Style
            image: new ol.style.Icon({src: 'https://openlayers.org/en/latest/examples/data/icon.png'})
        vectorSource = new ol.source.Vector
            features: [marker]
        vectorLayer = new ol.layer.Vector
            source: vectorSource
        @map = new ol.Map
            target: 'map'
            layers: [
                new ol.layer.Tile
                    source: new ol.source.OSM()
                vectorLayer
            ]
            view: new ol.View
                center: ol.proj.fromLonLat([68.762398,38.582698])
                zoom: 17
    methods:
        setupAnimations: ->
            observer = new IntersectionObserver (entries) ->
                entries.forEach (entry) ->
                    if entry.isIntersecting
                        entry.target.classList.add('animate-fade-in-up')
            ,
                threshold: 0.1
            
            document.querySelectorAll('.contacts-section .bg-white, .contacts-section .bg-gray-800').forEach (el) ->
                observer.observe(el)

        handleContactSubmit: (formData) ->
            debug.log "Contact form submitted: " + JSON.stringify(formData)
            
            @$root.$emit('open-modal', 
                component: 'SuccessModal'
                props:
                    title: 'Сообщение отправлено'
                    content: 'Мы получили ваше сообщение и свяжемся с вами в ближайшее время.'
            )

        showOnMap: ->
            debug.log "Showing location on map"
            address = encodeURIComponent(@contactInfo.address + ', Душанбе, Таджикистан')
            mapUrl = "https://yandex.ru/maps/?text=#{address}"
            window.open(mapUrl, '_blank')

        callPhone: ->
            debug.log "Calling phone: " + @contactInfo.phone
            window.location.href = "tel:#{@contactInfo.phone.replace(/\s/g, '')}"