import streamlit.components.v1 as components
import streamlit as st
import pandas as pd


def create_data_input_table(datapoint, col_names):
    st.subheader("Flagged Transaction:")
    data = datapoint.iloc[0].tolist()
    data[7:12] = [bool(value) for value in data[7:12]]
    df = pd.DataFrame({"Feature name": col_names, "Value": data })
    st.dataframe(df, hide_index=True, width=450, height=35*len(df)+38)

# Create a function to generate a table
def create_table(texts, values, title):
    # TODO: change color dataframe header -> tried many different options but none worked see below
    # header_style = '''s
    # <style>
    #     th{
    #         background-color: #00052D;
    #     }
    # </style>
    # '''
    df = pd.DataFrame({"Feature Explanation": texts, 'Value': values})
    # df = df.style.set_properties(**{
    #        'selector': 'th',
    #        'props': [
    #            ('background-color', 'black'),``
    #            ('color', 'cyan')]
    #    })
    # df = df.style.set_properties(**{'background-color': 'black',
    #                        'color': 'green'})

    st.markdown(f'#### {title}')  # Markdown for styling
    # headers = {
    #     'selector': 'th',
    #     'props': 'background-color' '#67c5a4'#'background-color: #000066; color: white;'
    #     }
    header = {
      'selector': 'th',
    'props': 'background-color: #000066; color: white;'
}
    
    # df = df.style.set_table_styles({
    #         ('Feature Explanation', 'Value'): [{'selector': 'th', 'props': 'border-left: 1px solid white'},
    #                                 {'selector': 'td', 'props': 'border-left: 1px solid #000066'}]
    #     }, axis=0)
    df = df.style.set_table_styles([header])
    
    # df.style.set_table_styles([headers])
    st.dataframe(df, hide_index=True, width=450)  # Display a simple table
    # st.markdown(header_style, unsafe_allow_html=True)

def ChangeButtonColour(widget_label, font_color, background_color='transparent'):
    htmlstr = f"""
        <script>
            var elements = window.parent.document.querySelectorAll('button');
            for (var i = 0; i < elements.length; ++i) {{ 
                if (elements[i].innerText == '{widget_label}') {{ 
                    elements[i].style.color ='{font_color}';
                    elements[i].style.background = '{background_color}'
                }}
            }}
        </script>
        """
    components.html(f"{htmlstr}", height=0, width=0)