import React, {Component} from 'react';
import {
  Text,
  View,
  Button,
  StyleSheet,
  SectionList
} from 'react-native';
import {RkChoice,RkTheme} from 'react-native-ui-kitten';

  RkTheme.setType('RkChoice', 'radioGreen', {
    backgroundColor: '#25D366',
    marginBottom:10,
    inner: {
      tintColor:'#1e212b',
      width:10,
      height:10
    },
  });


class DetailsScreen extends React.Component {
    constructor(props) {
      super(props);
      const { navigation } = props
      this.state = {
        test: 'Hola1',
        gym: navigation.getParam('itemId', 'NO-ID'),
        schedule: navigation.getParam('itemId', 'NO-ID').schedule
      };
    }

    _setHola = (text) => {
      this.setState({test: text})
    }

    _setCategories = (schedule) => {
      const cats = []
      schedule.map((sch) => {
        sch.data.map((cat) =>{
          cats.push(cat.name)
        })
      })
       return uniqueArray = cats.filter(function(item, pos) {
           return cats.indexOf(item) == pos;
      })
    }

    _filterCategories = (category) => {
      if(category == 'all'){
        this.setState({
          schedule: this.state.gym.schedule
        })
      }
      else{
        let filtered = this.state.gym.schedule.map((item) => {
          console.log(this.state.gym.schedule)
          item.data = item.data.filter(act => act.name == category)
          if (item.data.length > 0 ) return item
        })
        this.setState({
          schedule: filtered
        })
      }
    }


    render() {
      return (
        <View>
          <View style={styles.header}>
            <Text> {this.state.test} </Text>
            <Text style={styles.headerText} >Horarios Sucursal {this.state.gym.name}</Text>
          </View>
          {
            this._setCategories(this.state.gym.schedule).map((cat) => {
              return(
                <Button
                key={cat}
                onPress={() => this._filterCategories(cat)}
                color="#841584"
                title={cat}
                />

              )
            })
          }
          <Button
            key='all'
            onPress={() => this._filterCategories('all')}
            color="#841584"
            title='todos'
          />
          <View>
            <SectionList
            sections={this.state.schedule}
            renderSectionHeader={ ({section}) => <Text style={styles.dayText}>{section.title} </Text>}
            renderItem={({item}) => <View><Text style={styles.activityText}> {item.name} </Text> <Text style={styles.hourText}> {item.start} - {item.end}</Text> <View
            style={{
              borderBottomColor: 'gray',
              borderBottomWidth: 0.5,
              opacity: 0.5
            }}
          /> </View>}
            keyExtractor={(item, index) => index}
            />
          <Button
            title="Volver"
            onPress={() => this.props.navigation.goBack()}
          />
          </View>
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    baseText: {
      fontFamily: 'KohinoorBangla-Regular',
    },
    header: {
      backgroundColor: '#25D366',
      width:'100%',
      height:'25%',
      marginBottom: 25,
      alignItems: 'stretch',
      justifyContent: 'center'
    },
    headerText:{
      color: 'white',
      fontSize: 20,
      fontWeight: 'bold',
      textAlign: 'center',
      fontFamily: 'KohinoorBangla-Regular'
    },
    dayText:{
      backgroundColor: '#25D366',
      color: 'black',
      fontSize: 15,
      fontFamily: 'KohinoorBangla-Regular'
    },
    activityText:{
      backgroundColor: 'white',
      color: 'black',
      fontSize: 15,
      fontWeight: 'bold',
      fontFamily: 'KohinoorBangla-Regular'
    },
    hourText:{
      backgroundColor: 'white',
      color: 'grey',
      fontSize: 12,
      fontFamily: 'KohinoorBangla-Regular'
    }

  });
  export default DetailsScreen;