import React, { Component } from 'react'
import { Dimensions, RefreshControl, ScrollView, TouchableOpacity, View } from 'react-native'
import ImageBackground from 'react-native-fast-image'
import { CustomButton } from '../../components/CustomButton'
import LinearGradient from 'react-native-linear-gradient'
import Carousel from 'react-native-snap-carousel'
import Text from '../../components/Text'
import SliderEntry from '../../components/SliderEntry'
import styles_C from '../../styles/index.style'
import { itemWidth, sliderWidth } from '../../styles/SliderEntry.style'
import SearchableDropdown from '../../components/SearchableDropDown'
import { project, room } from '../../api/UserApi'
import 'intl'
import 'intl/locale-data/jsonp/th-TH'
import IndicatorLoading from '../../components/IndicatorLoading';
import { t } from '../../utils/i18n';

const { height, width } = Dimensions.get('window')
const SLIDER_1_FIRST_ITEM = 1


export default class ZoneAreaScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      refreshing: false,
      e: SLIDER_1_FIRST_ITEM,
      slider1ActiveSlide: 1,
      zone_snap_index:0,
      items: [
        {
          id: 418,
          name: 'เขตที่ 1',
        },
        {
          id: 419,
          name: 'เขตที่ 2',
        },
        {
          id: 421,
          name: 'เขตที่ 3',
        },
        {
          id: 422,
          name: 'เขตที่ 4',
        }
      ],
      zone_select_id: 418

    }
  }

  render() {
    return (
      <LinearGradient colors={['#3AA40C', '#2C7C0B']} style={{flex: 1}}>
        <ImageBackground source={require('../../../assets/images/zone_map.png')} style={{width:'100%',height: '100%',}}>
          <View style={{height:40,justifyContent:'center',alignItems:'center',paddingTop:20}}>
            <View style={{backgroundColor:'white',height: 40,paddingHorizontal:16,borderRadius:20,justifyContent:'center',alignItems:'center'}}>
              <Text style={{fontSize: 16,color:'black'}}>{t('submit_area_from_map')}</Text>
            </View>
          </View>
          <TouchableOpacity style={{position:'absolute',height: '17%',width: '20%',left:'15%',top:'25%'}}
                        onPress={() => {this.props.navigation.navigate('Room',{zone_id: 421})}}/>
          <TouchableOpacity style={{position:'absolute',height: '22%',width: '40%',left:'40%',top:'21%'}}
                        onPress={() => {this.props.navigation.navigate('Room',{zone_id: 422})}}/>
          <TouchableOpacity style={{position:'absolute',height: '20%',width: '15%',left:'32%',top:'43%'}}
                        onPress={() => {this.props.navigation.navigate('Room',{zone_id: 419})}}/>
          <TouchableOpacity style={{position:'absolute',height: '10%',width: '25%',left:'45%',top:'50%'}}
                        onPress={() => {this.props.navigation.navigate('Room',{zone_id: 419})}}/>
          <TouchableOpacity style={{position:'absolute',height: '20%',width: '30%',left:'15%',bottom:'15%'}}
                        onPress={() => {this.props.navigation.navigate('Room',{zone_id: 418})}}/>
        </ImageBackground>
        {/* <IndicatorLoading loadingVisible={this.state.isLoading}/> */}
      </LinearGradient>
    );
  }
}

const styles = {
  container: {
    flex: 1
  },
  room_screen_search: {
    color: '#269A21',
    height: 40,
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0)',
    width: '100%',

    //backgroundColor: '#ffffff',
  },
  room_border: {
    alignItems: 'center',
    borderColor: 'white',
    borderWidth: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    width: 220,

    marginBottom: 5,
    marginTop: 10,
    // alignItems: 'center',
    borderRadius: 5,
    padding: 15
  },
  image_style: {
    borderColor: 'white',
    borderWidth: 5,
    width: '100%',
    borderRadius: 100,
    height: '100%',
    backgroundColor: 'black'
  },
  button_reservation: {
    backgroundColor: '#145EB3',
    height: 40,
    borderRadius: 8
  },
  box_search: {
    width: '100%',
    flexDirection: 'row',
    display: 'flex',
    marginTop: 10,

    paddingLeft: 10,
    paddingRight: 10
  },
  contentContainer: {
    paddingHorizontal: 15,
    flex:1
  }
}
