import gradio as gr

# from arguments import init_args
from gr_app.GradioApp import GradioApp
from gr_app import args


demo = gr.Blocks(**args.block)

with demo:
    app = GradioApp()

    warning = gr.Warning()
    gr.Markdown('# Sentient.io - Demand Forecasting')
    gr.Markdown('Demo for demand forecasting pipeline')

    gr.HTML('<hr style="border:2px solid gray">')

    gr.Markdown('# Step 1 - Load Data')
    with gr.Row():
        gr.Markdown('''
                    Use button "Load Demo Data" for a quick demo with pre-loaded data. For uploading your own data, please follow the below requirements.
                    
                    ### Data Requirements:
                    - Time series data have to be in CSV format
                    - Data must contains datetime, y and sku columns. 
                    - Multiple SKUs can put in to same CSV
                    - Time interval in data must be consistent
                    - Missing value have to be filled up
                    ---
                    **Note**: The column "y" is the historical data of the variable that you want to forecast. It can be any parameter in any unit, as long as it is consistent across the same SKU. 
                    ''')

        with gr.Column():
            btn_load_data = gr.Button('Load Demo Data')

            gr.Markdown('------ or ------',
                        elem_classes="demo_app_text_center")

            file_upload_data = gr.File(**args.file_upload_data)

    md_ts_data_info = gr.Markdown()

    df_ts_data = gr.Dataframe(**args.df_ts_data)

    with gr.Accordion('Input Data Visualisation', open=False):
        dropdown_ts_data = gr.Dropdown(**args.dropdown_ts_data)
        plot_ts_data = gr.Plot()
        pass

    gr.HTML('<hr style="border:2px solid gray">')

    gr.Markdown('# Step 2 - Model Selection')

    with gr.Row():
        gr.Markdown('''
                    Train and evaluate model, identify data characteristics and select the best performing model. This step only need to run when the market regime shifted or when need to to re-select the model.
                    
                    - Click "Use Demo Data" Button if the demo data set has been loaded in Step 1
                    - Else, directly proceed to model selection
                    - Only upload dataset if the model select process had been previously done, and you have save a copy of the CSV response. 
                    ''')

        with gr.Column():
            btn_load_model_data = gr.Button('Use Demo Data')
            btn_model_selection = gr.Button(
                'Model Selection', variant='primary')
            gr.Markdown('Upload previous model selection result (if have):')
            file_upload_model_data = gr.File(**args.file_upload_model_data)

    df_model_data = gr.Dataframe()
    file_model_data = gr.File()

    accordion_model_selection = gr.Accordion(
        'Model Selection Visualisation',  open=False, visible=False)

    with accordion_model_selection:
        dropdown_model_selection = gr.Dropdown(**args.dropdown_model_selection)
        plot_model_selection = gr.Plot()

    gr.HTML('<hr style="border:2px solid gray">')

    gr.Markdown('# Step 3 - Forecasting')

    with gr.Row():
        gr.Markdown(
            'This step only can be done when model selection process is completed.')

        with gr.Column():
            gr.Markdown('''
                        ### Forecast Horizon
                        Max horizon will be 20% of provided data range. The unit will be same as the time series data time interval.
                        ''')
            slider_forecast_horizon = gr.Slider(**args.slider_forecast_horizon)

            btn_forecast = gr.Button("Forecast", variant='primary')

            btn_load_demo_result = gr.Button('Load Demo Result')

    df_forecast = gr.Dataframe(**args.df_forecast)
    file_forecast = gr.File()

    with gr.Accordion('Forecasting Result Visualisation',  open=False):
        dropdown_forecast = gr.Dropdown(**args.dropdown_forecast)
        plot_forecast = gr.Plot()

    # ============= #
    # = Functions = #
    # ============= #

    btn_load_data.click(
        app.btn_load_data__click,
        [],
        [df_ts_data,
         df_model_data,
         file_model_data,
         slider_forecast_horizon,
         md_ts_data_info])

    file_upload_data.upload(
        app.file_upload_data__upload,
        [file_upload_data],
        [df_ts_data,
         df_model_data,
         file_model_data,
         slider_forecast_horizon,
         md_ts_data_info])

    file_upload_model_data.upload(
        app.file_upload_model_data__upload,
        [file_upload_model_data],
        [df_model_data, file_model_data]
    )

    btn_load_model_data.click(
        app.btn_load_model_data__click,
        [], [df_model_data, file_model_data]
    )

    btn_model_selection.click(
        app.btn_model_selection__click,
        [],
        [df_model_data,
         file_model_data,
         accordion_model_selection,
         dropdown_model_selection])

    btn_forecast.click(
        app.btn_forecast__click,
        [], [df_forecast, file_forecast, dropdown_forecast]
    )

    btn_load_demo_result.click(
        app.btn_load_demo_result__click,
        [], [df_forecast, file_forecast, dropdown_forecast]
    )

    slider_forecast_horizon.change(
        app.slider_forecast_horizon__update,
        [slider_forecast_horizon],
        [])

    df_ts_data.change(
        app.df_ts_data__change,
        [], [dropdown_ts_data]
    )

    dropdown_ts_data.select(
        app.dropdown_ts_data__select,
        [dropdown_ts_data],
        [plot_ts_data]
    )

    dropdown_forecast.select(
        app.dropdown_forecast__select,
        [dropdown_forecast],
        [plot_forecast]
    )

    dropdown_model_selection.select(
        app.dropdown_model_selection__select,
        [dropdown_model_selection],
        [plot_model_selection])


demo.launch()