import React 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
}

@inject("spaceStore", "navigationStore")
@observer
export class SpaceListScreen extends React.Component<SpaceListScreenProps, SpaceListSpaceState> {
  static 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}
      />
    ),
  })

  state = {
    isRefreshing: false,
  }

  async componentDidMount() {
    this.refreshSpaces()
  }

  refreshSpaces = async () => {
    const { apiFindManySpace, resetSpaces } = this.props.spaceStore
    this.setState({ isRefreshing: true })
    resetSpaces()
    await apiFindManySpace()
    this.setState({ isRefreshing: false })
  }

  onCardPress = async (id: string) => {
    const { apiFindOneSpace } = this.props.spaceStore
    const { navigateTo, showSpinnerModal, hideSpinnerModal } = this.props.navigationStore

    showSpinnerModal()
    await apiFindOneSpace({
      id,
    })
    navigateTo("space")
    hideSpinnerModal()
  }

  renderCard = ({ item }) => {
    const space: SpaceListSpace = item
    const { isRefreshing } = this.state

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

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

  renderTags = () => {
    const { isRefreshing } = this.state
    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>
    )
  }

  render() {
    const { spaces } = this.props.spaceStore
    const { isRefreshing } = this.state

    const data = isRefreshing ? [{ id: 1 }, { id: 2 }, { id: 3 }] : spaces

    return (
      <Screen
        preset="scroll"
        backgroundColor={color.palette.grayFAF}
        refreshControl={
          <RefreshControl
            onRefresh={this.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={this.renderCard}
          ListHeaderComponent={this.renderTags()}
        />
      </Screen>
    )
  }
}