from db import *
# Загружаем элементы БД
db = read_db()
els = list(db.keys())


###### ОФОРМЛЕНИЕ #######

from dash import Dash, dcc, html, Input, Output,callback

app = Dash(__name__)

app.layout = html.Div([

# Название + объём
html.Div([
	# Реакция
	html.Div([
		dcc.Dropdown(els, id='reaction', placeholder="Реакция", maxHeight=500, style={'font-size': '120%'})
	], style={'flex': 4}),

	# Объём
	html.Div([
		dcc.Dropdown([30, 50, 100, 300, 1000], 100, id='amount', clearable=False, searchable=False
			, style={'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'})
	], style={'flex': 1, 'padding-left': 25})

], style={'display': 'flex', 'flexDirection': 'row'}),

	# Вывод
	html.Div(id='output', style={'text-align': 'center', 'padding-left': '15%', 'padding-right': '15%'})

], style={'padding': '5%', 'margin-left': '30%', 'margin-right': '30%'})

# padding - отступ
#    [#####]
# margin - сужение
#     [###]
#########################





####### ЛОГИКА ##########

from calc import *

@callback(
	Output('output', 'children'),
	Input('reaction', 'value'),
	Input('amount', 'value')
)
def update_output(reaction, amount):
	if reaction:
		comps, res = calc(reaction, amount, main = True)

		# Форматирование для HTML
		result = []
		for i in comps:
			result.append( html.Div(i + ': ' + str(comps[i])
, style={'background-color': '#3f3b17', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )

		# Выходное вещество
		result.append( html.Div(f'{reaction}: {res}'
, style={'background-color': '#183929', 'margin-top': 10, 'border-radius': 10, 'padding': 15, 'font-family': '"Source Sans Pro", sans-serif', 'font-size': '120%'}) )


		return result


#########################



if __name__ == '__main__':
	app.run(debug=True)
#	app.run(debug=False)