import streamlit as st
from datasets import load_dataset
import streamlit.components.v1 as components

# Load the dataset
dataset = load_dataset("awacke1/DatasetOfDatasetsUSA")

# Initialize session state for record navigation
if 'index' not in st.session_state:
    st.session_state.index = 0

# Define the maximum index as the length of the dataset - 1
max_index = len(dataset['train']) - 1

# Navigation buttons
col1, col2, col3, col4, col5 = st.columns(5)
with col1:
    if st.button('⏮️'):
        st.session_state.index = 0
with col2:
    if st.button('◀️') and st.session_state.index > 0:
        st.session_state.index -= 1
with col3:
    st.write(f"Record {st.session_state.index + 1} of {max_index + 1}")
with col4:
    if st.button('▶️') and st.session_state.index < max_index:
        st.session_state.index += 1
with col5:
    if st.button('⏭️'):
        st.session_state.index = max_index

# Generate the A-Frame scene HTML with links from the dataset
aframe_html = """
<a-scene embedded style="width: 800px; height: 600px;">
  <a-sky color="#ECECEC"></a-sky>
"""

# Loop through the dataset and create a-link entities for each record
for index, item in enumerate(dataset['train']):
    cityOrState = item['cityOrState']
    link = item['link']
    linkType = item['linkType']
    position = f"{index * 1.5} 1.25 -3"  # Simple positioning logic
    aframe_html += f"""
    <a-link href="{link}" position="{position}" title="{cityOrState} - {linkType}" image="#homeThumbnail"></a-link>
    """

# Close the A-Scene tag
aframe_html += "</a-scene>"

# Use Streamlit components to render the A-Frame HTML
components.html(aframe_html, height=600)