<link rel="import" href="../../../bower_components/iron-list/iron-list.html">
<link rel="import" href="../../styles/shared.html">
<link rel="import" href="../data/data.html">
<link rel="import" href="../dialog/dialog-mixin.html">
<link rel="import" href="../base/base.html">
<link rel="import" href="../icon/icon.html">
<link rel="import" href="../input/input.html">
<link rel="import" href="../locale/locale.html">
<link rel="import" href="../record-item/record-item.html">
<link rel="import" href="../sync/sync.html">

<dom-module id="pl-list-view">
    <template>

        <style include="shared">
            :host {
                --gutter-width: 2px;
                overflow-x: hidden;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                height: 100%;
                background: var(--color-background);
            }

            .filter-input-wrapper {
                flex: 1;
                display: flex;
            }

            .filter-input-wrapper pl-input {
                padding-left: 0;
                flex: 1;
            }

            header {
                --color-background: var(--color-primary);
                --color-foreground: var(--color-tertiary);
                --color-highlight: var(--color-secondary);
                color: var(--color-foreground);
                background: var(--color-background);
                text-shadow: rgba(0, 0, 0, 0.2) 0 2px 0;
                box-shadow: rgb(64, 143, 184) 0 2px 0;
            }

            header pl-icon[icon=logo] {
                font-size: 140%;
            }

            header pl-icon[arrow] {
                position: relative;
            }

            header pl-icon[arrow]::before {
                content: "";
                display: block;
                width: 15px;
                height: 15px;
                position: absolute;
                bottom: -10px;
                left: 0;
                right: 0;
                margin: 0 auto;
                transform: rotate(45deg);
                background: var(--color-foreground);
                pointer-events: none;
            }

            .empty {
                @apply --fullbleed;
                display: flex;
                flex-direction: column;
            }

            .empty-message {
                padding: 15px;
                text-align: center;
            }

            pl-record-item {
                transition: color 0.2s;
            }

            pl-record-item::before {
                content: "";
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                right: 100%;
                background: var(--color-highlight);
                transition: transform 0.2s cubic-bezier(0.6, 0, 0.2, 1);
                transform: translate3d(0, 0, 0);
            }

            pl-record-item[selected] {
                color: var(--color-background);
            }

            pl-record-item:focus:not([selected])::before {
                transform: translate3d(7px, 0, 0);
            }

            pl-record-item[selected]::before {
                transform: translate3d(100%, 0, 0);
            }

            .cloud-icon-wrapper {
                position: relative;
            }

            header pl-icon.syncing-icon {
                position: absolute;
                font-size: 55%;
                top: 1px;
                left: 0px;
                color: var(--color-highlight);
                text-shadow: none;
                animation: spin 1s infinite;
                transform-origin: center 49%;
            }
        </style>

        <header>
            <pl-icon icon="logo" class="tiles-1 tap" on-click="_lock" hidden$="{{ _filterActive(_filterString) }}"></pl-icon>
            <pl-icon icon="settings" class="tiles-2 tap" on-click="_openSettings" hidden$="{{ _filterActive(_filterString) }}"></pl-icon>
            <div class="cloud-icon-wrapper tiles-3 tap" on-click="_openCloudView" hidden$="{{ _filterActive(_filterString) }}">
                <pl-icon icon="cloud"></pl-icon>
                <pl-icon icon="refresh" class="syncing-icon" hidden$="[[ !isSynching ]]"></pl-icon>
            </div>
            <div class="filter-input-wrapper tiles-4 tap">
                <pl-icon icon="search" on-click="focusFilterInput"></pl-icon>
                <pl-input id="filterInput" placeholder="" value="{{ _filterString }}" on-escape="_clearFilter"></pl-input>
            </div>
            <pl-icon icon="add" arrow$="[[ _isEmpty(collection.records.length) ]]" class="tiles-5 tap" on-click="_newRecord" hidden$="{{ _filterActive(_filterString) }}"></pl-icon>
            <pl-icon icon="cancel" class="tiles-5 tap" on-click="_clearFilter" hidden$="{{ !_filterActive(_filterString) }}"></pl-icon>
        </header>

        <main id="main">

            <iron-list id="list"
                mutable-data
                scroll-target="main"
                hidden$="[[ _isEmpty(collection.records.length) ]]"
                items="[[ records ]]"
                selection-enabled
                selected-item="{{ selectedRecord }}">
                <template>
                    <div>
                        <pl-record-item record="[[ item ]]" selected$="[[ selected ]]" tabindex$="[[ tabIndex ]]"></pl-record-item>
                    </div>
                </template>
            </iron-list>

            <div hidden$="[[ !_isEmpty(collection.records.length) ]]" class="empty tiles">
                <div class="empty-message">
                    [[ $l("You don't have any data yet! Start by creating your first record!") ]]
                </div>
                <div class="spacer"></div>
            </div>

        </main>

    </template>

    <script src="list-view.js"></script>

</dom-module>
