#!/usr/bin/python
# -*- coding: utf-8 -*-

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

import plotly.graph_objs as go

from datetime import datetime

import pandas as pd

# задаём данные для отрисовки
from sqlalchemy import create_engine

# Задаём подключение к БД
db_config = {'user': 'my_user',
                 'pwd': 'my_user_password',
                 'host': 'localhost',
                 'port': 5432,
                 'db': 'zen'}

connection_string = 'postgresql://{}:{}@{}:{}/{}'.format(db_config['user'],
                                                             db_config['pwd'],
                                                             db_config['host'],
                                                             db_config['port'],
                                                             db_config['db'])

engine = create_engine(connection_string)

# получаем сырые данные
query = '''
            SELECT * FROM dash_visits
        '''
dash_visits = pd.io.sql.read_sql(query, con = engine)
dash_visits['dt'] = pd.to_datetime(dash_visits['dt'])

query = '''
            SELECT * FROM dash_engagement
        '''
dash_engagement = pd.io.sql.read_sql(query, con = engine)
dash_engagement['dt'] = pd.to_datetime(dash_engagement['dt'])

note = '''
          Этот дашборд отображает анализ взаимодействия пользователей с карточками Яндекс.Дзен (события).
          Используйте фильтры даты и времени, возрастных категорий и тем карточек для управления дашбордом.

       '''

# задаём лейаут

# задаём лейаут
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div(children=[

    # формируем html
    html.H1(children = 'Анализ взаимодействия пользователей с карточками Яндекс.Дзен'),

    html.Br(),

    # пояснения
    html.Label(note),

    html.Br(),

    html.Div([
        html.Div([
            html.Label('Я шириной 9 колонок из 12-ти возможных:'),
        ], className = 'nine columns'),
        html.Div([
            html.Label('Я шириной 3 колонки из 12-ти возможных:'),
        ], className = 'three columns'),
    ], className = 'row'),

    # элементы управления
    html.Div([
        html.Div([
            html.Div([
                # выбор временного периода
                html.Label('Дата и время:'),
                dcc.DatePickerRange(id = 'dt_selector'),],),

            html.Div([
                # выбор жанра
                html.Label('Возрастные категории:'),
                dcc.Dropdown(id = 'age-dropdown'),],),
        ], className = 'six columns'),

        html.Div([
            # выбор темы карточки
            html.Label('Темы карточек:'),
            dcc.Dropdown(
                id = 'item-topic-dropdow'
            ),
        ], className = 'six columns'),
    ], className = 'row'),

    # элементы управления
    html.Div([
        html.Div([
            # график выпуска игр по годам и жанрам
            html.Label('Выпуск игр по жанрам:'),
            dcc.Graph(
                style = {'height': '50vw'},
                id = 'history_absolute_visits'
                ),
        ], className = 'six columns'),

        html.Div([
            html.Div([
                # выбор временного периода
                html.Label('Дата и время:'),
                dcc.Graph(
                    style = {'height': '25vw'},
                    id = 'pie_visits'
                    ),],),

            html.Div([
                # выбор жанра
                html.Label('Возрастные категории:'),
                dcc.Graph(
                    style = {'height': '25vw'},
                    id = 'engagement_graph'
                    ),],),
        ], className = 'six columns'),
    ], className = 'row'),

])



# описываем логику дашборда
def update_figures(selected_item_topic, selected_ages, start_date, end_date):
	pass

  #применяем фильтрацию



  #return (
  	#)

if __name__ == '__main__':
    app.run_server(debug = True, host='0.0.0.0')