import dash_core_components as dcc
import dash_html_components as html
from config import strings


def make_tab_port_map_controls(
    port_arr: list,
    port_val: str,
    vessel_types_arr: list,
    vessel_type_val: str,
    year_arr: list,
    year_val: int,
    month_arr: list,
    month_val: int,
) -> html.Div:
    """
    Returns a HTML div of user controls found on top of the map tab.

    :param port_arr: list, all possible ports
    :param port_val: str, current port value
    :param vessel_types_arr: list, all possible vessel types
    :param vessel_type_val: str, current vessel type value
    :param year_arr: list, all possible years
    :param year_val: str, current year value
    :param month_arr: list, all possible months
    :param month_val: str, current month value
    :return: HTML div
    """
    return html.Div(
        className="tab-port-map-controls",
        children=[
            html.Div(
                className="tab-port-map-single-control-container area-a",
                children=[
                    html.Label(
                        className="control-label", children=[strings.LABEL_PORT]
                    ),
                    dcc.Dropdown(
                        id="port-map-dropdown-port",
                        clearable=False,
                        options=[{"label": port, "value": port} for port in port_arr],
                        value=port_val,
                    ),
                ],
            ),
            html.Div(className="tab-port-map-single-control-separator area-b"),
            html.Div(
                className="tab-port-map-single-control-container area-c",
                children=[
                    html.Label(
                        className="control-label", children=[strings.LABEL_VESSEL]
                    ),
                    dcc.Dropdown(
                        id="port-map-dropdown-vessel-type",
                        clearable=False,
                        options=[
                            {"label": vessel_type, "value": vessel_type}
                            for vessel_type in vessel_types_arr
                        ],
                        value=vessel_type_val,
                    ),
                ],
            ),
            html.Div(className="tab-port-map-single-control-separator area-d"),
            html.Div(
                className="tab-port-map-single-control-container date-grid area-e",
                children=[
                    html.Div(
                        className="tab-port-map-single-control-container-date",
                        children=[
                            html.Label(
                                className="control-label", children=[strings.LABEL_YEAR]
                            ),
                            dcc.Dropdown(
                                id="port-map-dropdown-year",
                                clearable=False,
                                options=[
                                    {"label": year, "value": year} for year in year_arr
                                ],
                                value=year_val,
                            ),
                        ],
                    ),
                    html.Div(
                        className="tab-port-map-single-control-separator smaller-line"
                    ),
                    html.Div(
                        className="tab-port-map-single-control-container-date",
                        children=[
                            html.Label(
                                className="control-label",
                                children=[strings.LABEL_MONTH],
                            ),
                            dcc.Dropdown(
                                id="port-map-dropdown-month",
                                clearable=False,
                                options=[
                                    {"label": month, "value": month}
                                    for month in month_arr
                                ],
                                value=month_val,
                            ),
                        ],
                    ),
                ],
            ),
        ],
    )

[((1491, 1557), 'dash_html_components.Div', 'html.Div', ([], {'className': '"""tab-port-map-single-control-separator area-b"""'}), "(className='tab-port-map-single-control-separator area-b')\n", (1499, 1557), True, 'import dash_html_components as html\n'), ((2269, 2335), 'dash_html_components.Div', 'html.Div', ([], {'className': '"""tab-port-map-single-control-separator area-d"""'}), "(className='tab-port-map-single-control-separator area-d')\n", (2277, 2335), True, 'import dash_html_components as html\n'), ((1051, 1119), 'dash_html_components.Label', 'html.Label', ([], {'className': '"""control-label"""', 'children': '[strings.LABEL_PORT]'}), "(className='control-label', children=[strings.LABEL_PORT])\n", (1061, 1119), True, 'import dash_html_components as html\n'), ((1187, 1329), 'dash_core_components.Dropdown', 'dcc.Dropdown', ([], {'id': '"""port-map-dropdown-port"""', 'clearable': '(False)', 'options': "[{'label': port, 'value': port} for port in port_arr]", 'value': 'port_val'}), "(id='port-map-dropdown-port', clearable=False, options=[{\n    'label': port, 'value': port} for port in port_arr], value=port_val)\n", (1199, 1329), True, 'import dash_core_components as dcc\n'), ((1702, 1772), 'dash_html_components.Label', 'html.Label', ([], {'className': '"""control-label"""', 'children': '[strings.LABEL_VESSEL]'}), "(className='control-label', children=[strings.LABEL_VESSEL])\n", (1712, 1772), True, 'import dash_html_components as html\n'), ((1840, 2029), 'dash_core_components.Dropdown', 'dcc.Dropdown', ([], {'id': '"""port-map-dropdown-vessel-type"""', 'clearable': '(False)', 'options': "[{'label': vessel_type, 'value': vessel_type} for vessel_type in\n    vessel_types_arr]", 'value': 'vessel_type_val'}), "(id='port-map-dropdown-vessel-type', clearable=False, options=[\n    {'label': vessel_type, 'value': vessel_type} for vessel_type in\n    vessel_types_arr], value=vessel_type_val)\n", (1852, 2029), True, 'import dash_core_components as dcc\n'), ((3241, 3313), 'dash_html_components.Div', 'html.Div', ([], {'className': '"""tab-port-map-single-control-separator smaller-line"""'}), "(className='tab-port-map-single-control-separator smaller-line')\n", (3249, 3313), True, 'import dash_html_components as html\n'), ((2643, 2711), 'dash_html_components.Label', 'html.Label', ([], {'className': '"""control-label"""', 'children': '[strings.LABEL_YEAR]'}), "(className='control-label', children=[strings.LABEL_YEAR])\n", (2653, 2711), True, 'import dash_html_components as html\n'), ((2803, 2945), 'dash_core_components.Dropdown', 'dcc.Dropdown', ([], {'id': '"""port-map-dropdown-year"""', 'clearable': '(False)', 'options': "[{'label': year, 'value': year} for year in year_arr]", 'value': 'year_val'}), "(id='port-map-dropdown-year', clearable=False, options=[{\n    'label': year, 'value': year} for year in year_arr], value=year_val)\n", (2815, 2945), True, 'import dash_core_components as dcc\n'), ((3534, 3603), 'dash_html_components.Label', 'html.Label', ([], {'className': '"""control-label"""', 'children': '[strings.LABEL_MONTH]'}), "(className='control-label', children=[strings.LABEL_MONTH])\n", (3544, 3603), True, 'import dash_html_components as html\n'), ((3728, 3876), 'dash_core_components.Dropdown', 'dcc.Dropdown', ([], {'id': '"""port-map-dropdown-month"""', 'clearable': '(False)', 'options': "[{'label': month, 'value': month} for month in month_arr]", 'value': 'month_val'}), "(id='port-map-dropdown-month', clearable=False, options=[{\n    'label': month, 'value': month} for month in month_arr], value=month_val)\n", (3740, 3876), True, 'import dash_core_components as dcc\n')]