import streamlit as st
import pandas as pd
import numpy as np
import pydeck as pdk
import plotly.express as px

st.set_page_config(layout="wide")

@st.cache(persist = True)
def load_data(n_rows):
    data = pd.read_csv("Motor_Vehicle_Collisions_-_Crashes.csv" , nrows = n_rows , parse_dates = [['CRASH DATE','CRASH TIME']])
    data.dropna(subset = ['LATITUDE','LONGITUDE'],inplace =True)
    data = data[(data['LATITUDE'] != 0) & (data['LONGITUDE'] != 0)]
    
    lowercase =  lambda x : str(x).lower()
    data.rename(lowercase , axis = 'columns', inplace = True)
    data.rename(columns = {'crash date_crash time':'date/time'},inplace=True)
    return data

data = load_data(100000)
original_data =  data
cols = str(data.columns)

# Set the title of your Streamlit app
title = 'Motor Vehicle Collision in New York Dashboard'
# Set the URL of the logo image
logo_url = "https://mustafasa.com/images/motorcrash.png"
# Create the HTML markup to display the logo
logo_html = f'<img src="{logo_url}" alt="Logo" style="vertical-align:middle; margin-right:20px; width:100px;">'
# Combine the logo HTML with the title text
title_html = f'{logo_html}<span style="font-size:32px;">{title}</span>'
# Render the title with logo using markdown
st.markdown(title_html, unsafe_allow_html=True)

tab1, tab2, tab3 = st.tabs(["Most injured", "Collisions count", "Top dangerous streets"])




with tab1:
    st.header("Where are the most people injured in NYC?")
    injured_people  = st.slider("Number of people injured in vehicle colllisions" , 1 ,18)
    st.map(data.query("injured_persons >= @injured_people")[['latitude','longitude']].dropna(how ='any'))
    
with tab2:
    st.header("How many collisions occur during a given time of the day?")
    hour  =  st.slider("Houe to look at " , 0,23,1)
    data =  data[data['date/time'].dt.hour == hour]
    
    st.markdown("Vehicle collisions between %i:00 and %i:00 "% (hour, (hour+1 ) % 24))
    midpoint = (np.average(data['latitude']), np.average(data['longitude']))
    
    st.write(pdk.Deck(
    
        map_style = "mapbox://styles/mapbox/light-v9",
        initial_view_state ={
         'latitude':midpoint[0],
         'longitude':midpoint[1],
         'zoom':11,
         'pitch':50,
        },
        layers =[
        pdk.Layer(
        "HexagonLayer",
        data = data[['date/time', 'latitude','longitude']],
        get_position = ['longitude','latitude'],
        radius = 100,
        extruded = True,
        pickable = True,
        elevation_scale = 4 ,
        elevation_range = [0,1000],
        ),
        ]
    ))
    
    st.subheader("Breakdowm by minute between %i:00 and %i:00 "%(hour,(hour+1)%24))
    filter = data[
       (data['date/time'].dt.hour >= hour) & (data['date/time'].dt.hour < (hour+1))
    ]
    
    hist = np.histogram(filter['date/time'].dt.minute ,  bins = 60 , range = (0,60))[0]
    chart_data = pd.DataFrame({'minute':range(60) , 'crashes':hist})
    fig = px.bar(chart_data , x = 'minute' , y ='crashes' ,hover_data = ['minute','crashes'],height = 400)
    st.write(fig)


with tab3:
    st.header("Top 5 dangerous streets affected type")
    select =  st.selectbox("Affected type of people", ['Pedestrians','Cyclists','Motorists'])
    
    if select  == 'Pedestrians':
        st.dataframe(original_data.query("injured_pedestrians >= 1")[["on street name","injured_pedestrians"]].sort_values(by = ['injured_pedestrians'], ascending = False).dropna(how='any')[:5],width=1200)
    elif select  == 'Cyclists':
        st.dataframe(original_data.query("injured_cyclists >= 1")[["on street name","injured_cyclists"]].sort_values(by = ['injured_cyclists'], ascending = False).dropna(how='any')[:5],width=1200)
    else:
        st.dataframe(original_data.query("injured_motorists >= 1")[["on street name","injured_motorists"]].sort_values(by = ['injured_motorists'], ascending = False).dropna(how='any')[:5],width=1200)
    
    if st.checkbox("Show Raw Data",False):
            st.subheader("Raw Data")
            st.dataframe(data,width=1200,height=1200)