import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import time
import socket

import pandas as pd
import plotly.graph_objs as go

UDP_IP = "192.168.1.199"
UDP_PORT = 1111
STATUS_INTERVAL = 500

client_socket = socket.socket(socket.AF_INET, socket.SOCK_DGRAM)
client_socket.settimeout(0.25)
addr = (UDP_IP, UDP_PORT)


# send a dummy command to start
client_socket.sendto(("FFS" + str(STATUS_INTERVAL)).encode(), addr)

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/'
    'datasets/master/gapminderDataFiveYear.csv')

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='cmd-1', type='text', value='FFR0000'),
    dcc.Interval(
            id='interval-component',
            interval=1*250, # in milliseconds
            n_intervals=0
    ),
    html.Button(id='cmd-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state'),
    html.Div(id='system-status-text')
    
])


@app.callback(Output('system-status-text', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    
    style = {'padding': '5px', 'fontSize': '16px'}
    data = []
    try:
        data, server = client_socket.recvfrom(1024)
        print(f'{data}')
    except socket.timeout:
        pass
    status = f'{data}'
    return [
        html.Span('System Status: ' + status, style=style),
    ]



@app.callback(Output('output-state', 'children'),
              [Input('cmd-button', 'n_clicks')],
              [State('cmd-1', 'value')])
def update_output(n_clicks, input1):
    client_socket.sendto(input1.encode(), addr)
    
    return u'''
        The Button has been pressed {} times,
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format(n_clicks, value)

if __name__ == '__main__':
    app.run_server(debug=False)
    client_socket.sendto("FFS0".encode(), addr)