<script>
    import { fly } from 'svelte/transition'
    import SideBar from './SideBar.svelte';
    var icon_show = true;
    var sidebar_show = false;

    function showBar() {
        sidebar_show = true;
    }

    function hide() {
        if (window.scrollY < 400) {
            icon_show = true;
        } else {
            icon_show = false;
            sidebar_show = false;
        }
    }

    import { DISTRICTS } from '../Data/district'
    import { District, City, Changed } from '../Stores/DistrictStore'

    export var moveTo;

    let curDisrict = {"미선택" : ["미선택"]};
    let curCity = "미선택";

    $: if(Object.keys(curDisrict)[0] != "미선택") {
        District.set(Object.keys(curDisrict)[0]);
    } else {
        District.set("");
    };

    $: if(curCity != "미선택") {
        City.set(curCity);
    } else {
        City.set("");
    }

    function setDistrict(district) {
        curDisrict = district;
        if(Object.keys(curDisrict)[0] == "세종특별자치시")
            curCity = "세종특별자치시";
        else
            curCity = "미선택";
        moveTo(Object.keys(curDisrict)[0], curCity);
        Changed.set(true);
    }

    function setCity(city) {
        curCity = city;
        moveTo(Object.keys(curDisrict)[0], curCity);
        Changed.set(true);
    }

</script>

<style>
    .sidebtn {
        border-radius: 5px;
        border: 0px;
        width: 70px;
        height: 70px;
        position: fixed;
        left: -20px;
        top: 120px;
        padding-right: 10px;
        text-align: right;
        background-color: #b71c1c;
        color: #ffffff;
		box-shadow: 0 10px 20px rgb(0 0 0 / 15%);
    }

    .sidebtn:focus {
        background-color: #ef5350;
    }

    .sidebtn:hover {
        background-color: #d32f2f;
    }

    .areas {
        display: flex;
        border-bottom: #999999 solid 1px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .areatitle {
        display: inline-block;
        text-align:center;
        width: 200px;
    }

    .district {
        display: inline-block;
        text-align:center;
        width: 125px;
        margin: 5px;
        border: 1px solid black;
        border-radius: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .district:hover {
        background-color: #ffebee;
    }

    .district:focus {
        background-color: #ffcdd2;
    }

    .district.selected{
        background-color: #ffcdd2;
    }

    .city {
        display: inline-block;
        text-align:center;
        width: 125px;
        margin: 5px;
        border: 1px solid black;
        border-radius: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .city:hover {
        background-color: #ffebee;
    }

    .city:focus {
        background-color: #ffcdd2;
    }

    .city.selected{
        background-color: #ffcdd2;
    }

</style>

<svelte:window on:scroll={hide}></svelte:window>

{#if (icon_show)}
    <button class="sidebtn"
    transition:fly="{{ x : -50, duration : 400}}"
    on:click={showBar}>
        지역<br>선택
    </button>
{/if}
<SideBar bind:show={sidebar_show}>
    <div class="areas">
        <div class="areatitle">광역시/도</div>
        {#each DISTRICTS.data as d}
            <div class="{Object.keys(curDisrict)[0] == Object.keys(d)[0] ? 'district selected' : 'district'}"
            on:click={() => {setDistrict(d)}}>
                {Object.keys(d)[0]}
            </div><br>
        {/each}
    </div><br>
    <div class="areas">
        <div class="areatitle">시/군/구</div>
        {#each curDisrict[Object.keys(curDisrict)[0]] as c}
            <div class="{curCity == c ? 'city selected' : 'city'}"
             on:click={() => {setCity(c)}}>
                {c}
            </div><br>
        {/each}
    </div>
</SideBar>