import React, { Component } from 'react'
import {
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity
} from 'react-native'
import _ from 'lodash'
import { graphql } from 'react-apollo'
import { createFilter } from 'react-native-search-filter'
import Picker from 'react-native-wheel-picker'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
import { Header, VideoBack, Loading, Separator } from '../common'

import GET_STUDIO_NEWS_QUERY from '../graphql/queries/new/getNews'
import ADDED_SUBSCRIPTION from '../graphql/subscriptions/new/newAdded'
import UPDATED_SUBSCRIPTION from '../graphql/subscriptions/new/newUpdated'
import DELETED_SUBSCRIPTION from '../graphql/subscriptions/new/newDeleted'

const PickerItem = Picker.Item
const colortheme = '#00FFC5'

class Main extends Component {
  static navigationOptions = ({ navigation }) => ({
    header:
      <Header
        title='Новости'
        leftButton
        leftIcon='md-add'
        colorLeft='#242323'
        rightButton
        rightIcon='ios-contact-outline'
        colorRight={colortheme}
        navigation={navigation}
        screen='User'
      />
  })

  constructor(props) {
    super(props)
    this.state = {
      searchTerm: '',
      keyToFilters: ['title'],
      selectedItem: '',
      selectedValue: ''
    }
  }

  componentWillMount() {
    this.props.data.subscribeToMore({
      document: ADDED_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) {
          return prev
        }

        const newItem = subscriptionData.data.newAdded
        const shouldIgnore = (item) => {
          return ((newItem.studio._id !== item.studio._id) || (newItem._id === item._id))
        }

        if (prev.getNews.some(shouldIgnore)) {
          console.log('garbage')
        } else {
          return {
            ...prev,
            getNews: [{ ...newItem }, ...prev.getNews] }
        }
        return prev
      }
    })

    this.props.data.subscribeToMore({
      document: UPDATED_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) {
          return prev
        }

        const updateItem = subscriptionData.data.newUpdated
        const newVar = prev.getNews.findIndex(item => (item._id === updateItem._id))
        const newGetStudioNews = [...prev.getNews]
        newGetStudioNews[newVar] = updateItem

        if (prev.getNews.find(t => (t._id === updateItem._id))) {
          return {
            ...prev,
            getNews: newGetStudioNews
          }
        }
        return prev
      }
    })

    this.props.data.subscribeToMore({
      document: DELETED_SUBSCRIPTION,
      updateQuery: (prev, { subscriptionData }) => {
        if (!subscriptionData.data) {
          return prev
        }

        const deleted = subscriptionData.data.newDeleted
        if (prev.getNews.find(t => t._id === deleted._id)) {
          return {
            ...prev,
            getNews: prev.getNews.filter(t => t._id !== deleted._id)
          }
        }
        return prev
      }
    })
  }

  onPickerSelect(value, index) {
    this.setState({
      searchTerm: value,
      selectedItem: index
    })
  }

  searchUpdated(term) {
    this.setState({ searchTerm: term })
  }

  render() {
    const { data: { getNews, loading } } = this.props
    const { searchTerm, keyToFilters } = this.state
    const filteredData = getNews ? getNews.filter(createFilter(searchTerm, keyToFilters)) : []

    const uniqueData = getNews ? _.uniqBy(getNews, 'title') : []

    const { container, subContainer, thumbImg, titleContainer, titleContainer2, h1, chevron, itemStyle, picker } = styles

    if (loading) { return <Loading /> }

    return (
      <View style={container}>
        <VideoBack />
        <ScrollView>
          <Picker
            style={picker}
            itemStyle={itemStyle}
            selectedValue={this.state.searchTerm}
            onValueChange={(value, index) => { this.onPickerSelect(value, index) } }
          >
            <PickerItem label='Все' value='' />
            {uniqueData.map((data) => (
              <PickerItem
                key={data._id}
                value={data._id}
                label={data.title}
              />
            )
            )}
          </Picker>
          {filteredData.map(item => {
            return (
              <TouchableOpacity onPress={ () => this.props.navigation.navigate('Detail', (item)) } key={item._id} >
                <Separator />
                <View style={subContainer}>
                  <View style={titleContainer}>
                    <Image style={thumbImg} source={{ uri: item.img }} />
                    <View style={titleContainer2}>
                      <Text style={h1} numberOfLines={1} ellipsizeMode='tail'>{item.subtitle}</Text>
                    </View>
                  </View>
                  <Icon style={chevron} name="chevron-right" size={50} color="#DBD7D2" />
                </View>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    )
  }
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    marginTop: -75
  },
  subContainer: {
    flex: 1,
    backgroundColor: 'rgba(36, 36, 35, 0.4)',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 5
  },
  titleContainer: {
    flex: 1,
    backgroundColor: 'transparent',
    flexDirection: 'row'
  },
  thumbImg: {
    width: 100,
    height: 100
  },
  titleContainer2: {
    flex: 1,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'flex-start'
  },
  h1: {
    backgroundColor: 'transparent',
    flex: -1,
    alignSelf: 'flex-start',
    justifyContent: 'flex-start',
    fontFamily: 'AppleSDGothicNeo-Light',
    paddingLeft: 10,
    fontWeight: '400',
    color: '#DBDCDC',
    fontSize: 17
  },
  chevron: {
    backgroundColor: 'transparent',
    justifyContent: 'flex-end',
    alignSelf: 'center'
  },
  picker: {
    backgroundColor: 'rgba(36, 36, 35, 0.4)',
    height: 180,
    width: '100%'
  },
  itemStyle: {
    fontFamily: 'AppleSDGothicNeo-Light',
    backgroundColor: 'transparent',
    fontWeight: '700',
    color: '#DBDCDC',
    fontSize: 20
  }
}

export default graphql(GET_STUDIO_NEWS_QUERY)(Main)