import { LitElement, html } from 'lit-element';
import './pumps-element.js';
import './pumps-outline-element.js';
import './item-list-element.js';
import './my-icons.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import { allPumps } from '../actions/pump.js';
import { connect } from 'pwa-helpers/connect-mixin.js';
import { store } from '../store.js';
import './input-element.js';

class PosPumpsElement extends connect(store)(LitElement) {
    render() {
        return html`
        <style>
        .pumps-view {
            width: 100%;
            height: 300px;
        }
        .pumps-view >.pumps {
            width: 70%;
            float: left;
        }

        .pumps-view >.outline {
            float: right;
            border: 1px solid;
            padding: 5px;
            width: 100px;
            margin-right: 9em;

        }
        .pumps {
            height: 300px;
            border: 1px solid;
            padding: 5px;
            margin-left: 16px;
        }
                
        .item-list {
            width:  40%;
            padding: 20px;
        }
        .dropdown {
            position: relative;
            display: inline-block;
            float: right;
            margin-right: 170px;
        }
  
        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            background-color: #eee;
            z-index: 1;
        }
        
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            font-size: 13px;
        }
  
        .dropdown-content a:hover {background-color: lightgrey;}
        
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .input{
            padding-top: 5em;
            padding-left: 26em;
        }
        </style>
            <div class="menu" style="height: 50px;">
                
                <div class="dropdown">
                    <paper-icon-button id="menu-btn" icon="menu" role="button">
                    </paper-icon-button>
                    <div class="dropdown-content">
                        <a href="#">
                            <paper-icon-button icon="old-receipt" role="button">
                            </paper-icon-button>
                            Old Receipts
                        </a>
                        <a href="#">
                        <paper-icon-button icon="logout" role="button">
                        </paper-icon-button>
                        <span on-click="logout">Logout</a>
                    </div>
                </div>
            </div>
            <div class="pumps-view">
                <div class="pumps"> 
                    <pumps-element></pumps-element>
                </div>
                <div class="outline" style="">
                    <pumps-outline-element></pumps-outline-element>
                </div>
            </div>
            <!--div class="item-list">
                <item-list-element></item-list-element>
            </div-->

            <div class="input">
                <input-element></input-element>
            </div>
        `;
    }

    firstUpdated() {
        store.dispatch(allPumps());
    }

    _menuButtonClicked(){
        var nav = document.getElementById('posmenu');
        nav.toggle('open');
    }
    

}

customElements.define('pos-pumps-element', PosPumpsElement);