import React, { useState, useEffect, FunctionComponent } from "react"
import { View, ViewStyle, TextStyle, RefreshControl } from "react-native"
import { FlatList } from "react-navigation"
import { NavigationStackScreenProps } from "react-navigation-stack"

import { Observer, inject } from "mobx-react"
import { Placeholder, PlaceholderMedia, Shine, PlaceholderLine, Fade } from "rn-placeholder"
import { Card } from "../../components/card"
import { Screen } from "../../components/screen"
import { color, spacing, typography } from "../../theme"
import { Tag } from "../../components/tag"
import { NavigatorScreenProps, NavigationStore } from "../../navigation/navigation-store"
import { Header } from "../../components/header"
import { SpaceStore, AppendSpaceSnapshot } from "../../models/space-store"

const noop = () => null

interface SpaceListScreenProps
  extends NavigationStackScreenProps<{
    screenSprops: NavigatorScreenProps
  }> {
  spaceStore: SpaceStore
  navigationStore: NavigationStore
}

interface SpaceListSpaceState {
  isRefreshing: boolean
}

const LIST_CONTAINER: ViewStyle = {
  alignItems: "center",
  paddingBottom: spacing[5],
}

const LIST: ViewStyle = {
  paddingHorizontal: spacing[5],
}

const HEADER: ViewStyle = {
  backgroundColor: color.palette.grayFAF,
  paddingBottom: 0,
  marginBottom: 0,
}

const HEADER_LEFT_TEXT: TextStyle = {
  color: color.palette.black,
  fontSize: 20,
  fontFamily: typography.headerBold,
}

const HEADER_RIGHT_TEXT: TextStyle = {
  color: color.primaryDarker,
  fontFamily: typography.primaryBold,
  marginTop: 4,
}

const SPACE_LIST_TAGS: ViewStyle = {
  flexDirection: "row",
  justifyContent: "flex-start",
  flexGrow: 0,
  flexShrink: 0,
  flexWrap: "wrap",
}

const TAG: ViewStyle = {
  flexDirection: "row",
  flexWrap: "nowrap",
  alignItems: "center",
  backgroundColor: color.palette.white,
}

const TAG_PREFIX: TextStyle = {
  color: color.palette.gray949,
  fontFamily: typography.primaryBold,
  fontSize: 12,
  lineHeight: 12,
  marginRight: spacing[1],
}

const TAG_VALUE: TextStyle = {
  color: color.palette.gray5F6,
  fontFamily: typography.primaryBold,
  lineHeight: 12,
}

const PLACEHOLDER_TAG: ViewStyle = {
  borderRadius: 1,
  marginRight: spacing[2],
  marginBottom: spacing[2],
}

const PLACEHOLDER_CARD_WRAPPER: ViewStyle = {
  width: "100%",
  shadowColor: "#000",
  shadowOffset: {
    width: 0,
    height: 1,
  },
  shadowOpacity: 0.12,
  shadowRadius: 2.22,
  elevation: 1,
}

const PLACEHOLDER_CARD: ViewStyle = {
  height: 288,
  marginTop: 16,
  borderRadius: 3,
  width: "100%",
  backgroundColor: color.palette.offWhite,
}

interface SpaceListSpace extends AppendSpaceSnapshot {
  averageRating: number
}

const SpaceList: FunctionComponent<SpaceListScreenProps> = props => {
  const [isRefreshing, setIsRefreshing] = useState(false)

  const { spaces, apiFindOneSpace, apiFindManySpace, resetSpaces } = props.spaceStore
  const { navigateTo, showSpinnerModal, hideSpinnerModal } = props.navigationStore
  const data = isRefreshing ? [{ id: 1 }, { id: 2 }, { id: 3 }] : spaces

  const onCardPress = async (id: string) => {
    showSpinnerModal()
    await apiFindOneSpace({
      id,
    })
    navigateTo("space")
    hideSpinnerModal()
  }

  const renderCard = ({ item }) => {
    const space: SpaceListSpace = item

    if (isRefreshing) {
      return (
        <View style={PLACEHOLDER_CARD_WRAPPER}>
          <Placeholder Animation={Fade}>
            <PlaceholderMedia style={PLACEHOLDER_CARD} />
          </Placeholder>
        </View>
      )
    }

    return (
      <Card
        titleText={space.title}
        onPress={() => onCardPress(space.id)}
        subTitleText={space.spaceLocationFormatted}
        tagText="/hr"
        tagPrefixText={`$${space.price.hourly}`}
        rating={space.averageRating}
        imageURL={space.images[0].url}
      />
    )
  }

  const refreshSpaces = async () => {
    setIsRefreshing(true)
    resetSpaces()
    await apiFindManySpace()
    setIsRefreshing(false)
  }

  const renderTags = () => {
    if (isRefreshing) {
      return (
        <Placeholder Animation={Shine}>
          <View style={SPACE_LIST_TAGS}>
            <PlaceholderLine height={15} width={21} style={PLACEHOLDER_TAG} />
            <PlaceholderLine width={25} style={PLACEHOLDER_TAG} />
            <PlaceholderLine width={43} style={PLACEHOLDER_TAG} />
            <PlaceholderLine width={30} style={PLACEHOLDER_TAG} />
          </View>
        </Placeholder>
      )
    }
    return (
      <View style={SPACE_LIST_TAGS}>
        <Tag
          style={TAG}
          prefixTx={null}
          tx="spaceListScreen.tags.time.value"
          prefixTextStyle={TAG_PREFIX}
          textStyle={TAG_VALUE}
        />
        <Tag
          style={TAG}
          prefixTx="spaceListScreen.tags.location.prefix"
          tx="spaceListScreen.tags.location.value"
          prefixTextStyle={TAG_PREFIX}
          textStyle={TAG_VALUE}
        />
        <Tag
          style={TAG}
          prefixTx="spaceListScreen.tags.activity.prefix"
          tx="spaceListScreen.tags.activity.value"
          prefixTextStyle={TAG_PREFIX}
          textStyle={TAG_VALUE}
        />
        <Tag
          style={TAG}
          prefixTx="spaceListScreen.tags.amenities.prefix"
          tx="spaceListScreen.tags.amenities.value"
          prefixTextStyle={TAG_PREFIX}
          textStyle={TAG_VALUE}
        />
      </View>
    )
  }

  useEffect(() => {
    refreshSpaces()
  }, [])

  return (
    <Observer>
      {() => (
        <Screen
          preset="scroll"
          backgroundColor={color.palette.grayFAF}
          refreshControl={
            <RefreshControl
              onRefresh={refreshSpaces}
              refreshing={isRefreshing}
              tintColor={color.primary}
              colors={[color.primary, color.primaryDarker]}
              style={{ backgroundColor: "transparent" }}
            />
          }>
          <FlatList
            style={LIST}
            contentContainerStyle={LIST_CONTAINER}
            data={data}
            keyExtractor={item => String(item.id)}
            renderItem={renderCard}
            ListHeaderComponent={renderTags()}
          />
        </Screen>
      )}
    </Observer>
  )
}

export const SpaceListScreen = inject("spaceStore", "navigationStore")(SpaceList)

SpaceListScreen.navigationOptions = ({ navigation }) => ({
  header: (
    <Header
      onRightPress={() => {
        navigation.navigate("searchFilters")
      }}
      onLeftPress={() => noop()}
      leftTx="spaceListScreen.searchSpaces"
      rightTx="spaceListScreen.filter"
      style={HEADER}
      leftTextStyle={HEADER_LEFT_TEXT}
      rightTextStyle={HEADER_RIGHT_TEXT}
    />
  ),
})