# Keeping this file as an example of Dash; can't really use Dash now since there are some missing features
# for what we are trying to build and documentation is very poor at this point

# in order to run, install:
# pip install dash==0.17.7
# pip install dash-renderer==0.7.3
# pip install dash-html-components==0.6.2
# pip install dash-core-components==0.5.1
# pip install plotly==2.0.11

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, Event
# import plotly.graph_objs as go
# import pandas as pd
from metis.security import is_valid_user
import requests

app = dash.Dash()

app.layout = html.Div(children=[
  # SCOPE header
  html.Div(children=[
    html.Img(src="logo.png", alt="Metis")
  ], style={'padding' : 7, 'text-align' : 'center'}),
  html.Hr(style={'width' : '30%'}),
  # content
  html.Div(children=[
    html.H3("Welcome to Metis", hidden=False, id="page_header"),
    html.H3("Rules", hidden=True, id='help_page'),
    # login form (can't seem to get Form to work properly so Div is used--button must be clicked with mouse)
    html.Div(children=[
      html.P(children=["Username: ", dcc.Input(type='text', id='username', placeholder='username')],
      id='user_field'),
      html.P(children=["Password: ", dcc.Input(type='password', id='password', placeholder='password')],
      id='password_field'),
      html.Button(children=['Login'], type='submit', id='login_button')
      ], style={'width' : '30%', 'margin' : '0 auto'}, id="login_form", hidden=False)
    ], style={'display' : 'block', 'text-align' : 'center', 'padding' : 2}),
  html.Br(),
  html.Hr(style={'width' : '30%'}),
  # footer
  html.Div(children=[
    html.Img(src="logo.png", alt="SCOPE Logo")
    ], style={'padding' : 7, 'text-align' : 'center'})
  ])

@app.callback(Output('page_header', 'children'),
  events=[Event('login_button', 'click')],
  state=[State('username', 'value'), State('password', 'value')])
def login(username, password):
  if not username or not password:
    return html.Div("Please provide your username and password",
    style={'color' : 'red', 'text-align' : 'center'})
  elif is_valid_criteo_user(username, password):
    return "You have been logged in"
  else:
    return html.Div("Wrong username/password please try again.",
    style={'color' : 'red', 'text-align' : 'center'})

@app.callback(Output('user_field', 'hidden'), [Input('page_header', 'children')])
def hide_username_box(page):
  if page == 'You have been logged in':
    return True

@app.callback(Output('password_field', 'hidden'), [Input('page_header', 'children')])
def hide_password_box(page):
  if page == 'You have been logged in':
    return True

@app.callback(Output('login_button', 'hidden'), [Input('page_header', 'children')])
def hide_login_button(page):
  if page == 'You have been logged in':
    return True

@app.callback(Output('page_header', 'hidden'), [Input('page_header', 'children')])
def change_header(page):
  if page == 'You have been logged in':
    return True

@app.callback(Output('username', 'value'), [Input('page_header', 'children')])
def clear_username_field():
  return ''

@app.callback(Output('password', 'value'), [Input('page_header', 'children')])
def clear_password_field():
  return ''

@app.callback(Output('help_page', 'hidden'), [Input('page_header', 'hidden')])
def show_help(logged_in):
  if logged_in:
    return False
  else:
    return True

if __name__ == "__main__":
  app.run_server(debug=True)