from dash import html, dcc
import dash_bootstrap_components as dbc
from utils.file_utils import list_files_in_directory, get_file_metadata

DATA_SOURCE_DIR = './training/data_source/'

def DataSourceLayout():
    data_files = list_files_in_directory(DATA_SOURCE_DIR)
    data_table = generate_data_source_table(data_files)
    
    return html.Div([
        html.H2("Data Source Management"),
        dbc.Button("Add New Data", id="add-new-data-source", color="primary", className="mb-3"),
        html.Div(id="new-data-source-input"),
        data_table,
        html.Div(id="data-source-upload-status")
    ])


def generate_data_source_table(files):
    header = [
        html.Thead(html.Tr([html.Th("File Name"), html.Th("Length (s)"), html.Th("Size (KB)"), html.Th("Actions")]))
    ]
    rows = []
    for file in files:
        length, size = get_file_metadata(f"{DATA_SOURCE_DIR}/{file}")
        rows.append(html.Tr([
            html.Td(file),
            html.Td(length),
            html.Td(size),
            html.Td(
                dbc.Button("Delete", id={'type': 'delete-button', 'index': file}, color='danger')
            )
        ]))
    return dbc.Table(header + [html.Tbody(rows)], bordered=True, hover=True)