<script>
    import SideBar from "./SideBar.svelte"

    export let festa;
    export let sidebar_show = false;
    var side = "right";
    var weatherData, weathers;

    const WEATHERIMG = {
        "맑음" : "./public/sunny.png",
        "비" : "./public/rain.png", 
        "비/눈" : "./public/rainsnow.png", 
        "눈" : "./public/snow.png"
    }

    function hide() {
        if (window.scrollY > 400) {
            sidebar_show = false;
        }
    }

    $: if(festa.weathers) weatherData = JSON.parse(festa.weathers);
    $: if(festa.weathers) weathers = Array.from(Object.keys(weatherData)).map((v) => {
        return { "date" : v.slice(4), "temp" : weatherData[v].temp, "weather" : weatherData[v].weather };
    });

</script>

<style>
    .info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .title {
        font-size: 18pt;
        font-weight: bold;
    }

    .content {
        padding: 0.5rem 0.5rem 0.5rem;
        text-align: left;
    }

    .festaimg {
        max-width: 560px;
    }

    .locpin, .telpin, .calpin {
        width: 20px;
        height: 20px;
    }

    .weather {
        /* border: 1px solid #999999; */
        border-collapse: collapse;
    }

    .weather td {
        padding: 0.3rem;
        border: 1px solid #cccccc;
    }

    .weatherimg {
        width : 100px;
    }


</style>

<svelte:window on:scroll={hide}></svelte:window>
<SideBar bind:show={sidebar_show} {side}>
    <div class="info">
        <div class="title">{festa.title}</div>
        <img class="festaimg" alt="festaimg" src={festa.firstimage}><br>
        {#if weathers}
            <table class="weather"><tr>
                {#each weathers as weather}
                    <td class="weathercell">
                        <img class="weatherimg" alt="weather" src={WEATHERIMG[weather.weather]}><br>
                        {weather.date.slice(0, 2) + '/' + weather.date.slice(2, 4)}<br>
                        {weather.temp}℃<br>
                    </td>
                {/each}
            </tr></table>
        {/if}
        <div class="content">
            <img class="locpin" alt="pin" src="/public/map-pin.png"> 개최지 : {festa.addr}<br>
            <img class="telpin" alt="pin" src="/public/tel-pin.jpeg"> 전화번호 : {festa.tel}<br>
            <img class="calpin" alt="pin" src="/public/cal-pin.png"> 행사일 : {festa.eventstartdate} - {festa.eventenddate}<br>
        </div>
    </div>
    
    

</SideBar>