from dash import html, dcc
import dash_bootstrap_components as dbc

def VoiceDetectionLayout():
    return html.Div([
        html.H2("Voice Detection Management"),
        dbc.Button("Start Voice Detection Training", id="start-training-voice-detection", color="primary", className="mb-3"),
        dbc.Toast(
            id="voice-detection-training-status",
            header="Training Status",
            is_open=False,
            dismissable=True,
            icon="info",
        ),
        html.H3("Upload Voice Detection Data"),
        dcc.Upload(
            id="upload-voice-detection-data",
            children=html.Div([
                'Drag and Drop or ',
                html.A('Select Files')
            ]),
            style={
                'width': '100%',
                'height': '60px',
                'lineHeight': '60px',
                'borderWidth': '1px',
                'borderStyle': 'dashed',
                'borderRadius': '5px',
                'textAlign': 'center',
                'margin': '10px'
            },
            multiple=True
        ),
        html.Div(id="voice-detection-data-upload-status"),
        dbc.Button("Refresh Voice Detection Data", id="refresh-voice-detection-data", color="secondary", className="mt-3"),
        html.Div(id="voice-detection-data-display"),
        dbc.Button("Refresh Voice Detection Model Status", id="refresh-voice-detection-model-status", color="secondary", className="mt-3"),
        html.Div(id="voice-detection-model-status"),
    ])