interface DashboardScreenProps extends NavigationScreenProps<{}> {
  navigationStore?: NavigationStore
  userStore?: UserStore
  availabilityStore?: AvailabilityStore
  washoutStore?: WashoutStore
  locationStore?: LocationStore
  forumStore?: ForumStore
  loadStore?: LoadStore
  permissionStore?: PermissionStore
  notificationStore?: NotificationStore
}

const Dashboard: NavigationScreenComponent = (props: DashboardScreenProps) => {
  const [isRefreshing, setIsRefreshing] = useState(false)
  const [isLoadingWashouts, setIsLoadingWashouts] = useState(false)
  const [isLoadingForumPosts, setIsLoadingForumPosts] = useState(false)
  const [isLoadingLoads, setIsLoadingLoads] = useState(false)
  const [tabState, setTabState] = useState({ newIndex: 0 })

  const { isLocationAuthorized } = props.permissionStore
  const { resetDashboardLoads, apiGetDashboardLoads } = props.loadStore
  const { getCurrentLocation } = props.locationStore
  const { resetDashboardWashouts, apiGetDashboardWashouts } = props.washoutStore
  const { resetForumPosts, apiGetForumPosts } = props.forumStore
  const { currentUser } = props.userStore
  const { isProfileComplete } = currentUser

  const searchLoads = async () => {
    if (!isProfileComplete || !isLocationAuthorized) return
    setIsLoadingLoads(true)
    resetDashboardLoads()
    await apiGetDashboardLoads()
    setIsLoadingLoads(false)
  }

  const refreshHomeTab = async () => {
    setIsRefreshing(true)
    await loadHomeTab()
    setIsRefreshing(false)
  }

  const searchWashouts = async () => {
    setIsLoadingWashouts(true)
    resetDashboardWashouts()
    await apiGetDashboardWashouts(props.locationStore.currentLocation)
    setIsLoadingWashouts(false)
  }

  const searchForumPosts = async () => {
    setIsLoadingForumPosts(true)
    resetForumPosts()
    await apiGetForumPosts()
    setIsLoadingForumPosts(false)
  }

  const updateNotificationsCount = () => {
    props.notificationStore.apiGetNotificationsUnreadCount()
  }

  const loadHomeTab = async () => {
    await getCurrentLocation()
    Promise.all([searchWashouts(), searchForumPosts(), searchLoads(), updateNotificationsCount()])
  }

  const tabs = [
    {
      tx: "dashboard.screenToggleDashboard",
      screen: (
        <HomeTab
          isLoadingLoads={isLoadingLoads}
          isLoadingWashouts={isLoadingWashouts}
          isLoadingForumPosts={isLoadingForumPosts}
        />
      ),
    },
    {
      text: translate("dashboard.screenToggleAvailability", {
        count: props.availabilityStore.myTrucks.length,
      }),
      screen: <AvailabilityTab />,
      rightComponent: <WalkthroughPin style={AVAILABILITY_PIN} id="truck-availability-11" />,
    },
  ]

  useEffect(() => {
    loadHomeTab()
    const screenWillFocus = props.navigation.addListener("willFocus", c => loadHomeTab())
    return () => screenWillFocus.remove()
  }, [props.navigation])

  return (
    <Observer>
      {() => (
        <Screen
          backgroundColor={color.palette.offWhite}
          preset="scroll"
          stickyHeaderIndices={[0]}
          refreshControl={
            <RefreshControl
              onRefresh={refreshHomeTab}
              refreshing={isRefreshing}
              tintColor="transparent"
              colors={["transparent"]}
              style={{ backgroundColor: "transparent" }}
            />
          }>
          <ScreenToggleBar tabs={tabs} state={tabState} onTabChange={setTabState} />

          <ScreenToggleScene screens={tabs} toggleBarState={tabState} />
        </Screen>
      )}
    </Observer>
  )
}

export const DashboardScreen = inject(
  "navigationStore",
  "userStore",
  "availabilityStore",
  "washoutStore",
  "locationStore",
  "forumStore",
  "loadStore",
  "permissionStore",
  "notificationStore",
)(Dashboard)

DashboardScreen.navigationOptions = ({ navigation }) => ({
  header: (
    <Header
      titleTx="dashboard.headerTitle"
      style={HEADER_STYLE}
      onLeftPress={() => navigation.navigate("accountSettings")}
      leftIcon="settings"
      leftIconStyle={{ height: 19 }}
      leftView={<HeaderLeftButton onLeftPress={() => navigation.navigate("accountSettings")} />}
      rightView={<HeaderRight />}
      noBackButton
    />
  ),
})