import * as React from "react"
import { View, ViewStyle, Animated, Text, Dimensions } from "react-native"
import { HeaderProps } from "./header.props"
import { translate } from "../../i18n/"
import { TextField } from "../../components/text-field"
import { Icon } from "../../components/icon"

interface HeaderState {
  modalVisible?: boolean
  fullHeight,
  modalOpacity,
}
/**
 * Header that appears on many screens. Will hold navigation buttons and screen title.
 */
export class Header extends React.Component<HeaderProps, HeaderState> {

  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      fullHeight: new Animated.Value(0),
      modalOpacity: new Animated.Value(0),

    };
  }
  search = (e) => {
    console.log(e);
  }
  showContent(visible) {
    let height = Dimensions.get('window').height;
    this.setState(
      { modalVisible: !this.state.modalVisible },
      () => {
        Animated.timing(
          this.state.modalOpacity,
          { toValue: this.state.modalVisible ? 1 : 0 }

        ).start()
        Animated.timing(
          this.state.fullHeight,
          { toValue: this.state.modalVisible ? height : 0 }
        ).start()
      }
    )
  }

  render() {

    let searchResults = [
      {
        title: 'Grill London',
        address: 'PLC "Mega", Islandijos pl. 32, Kaunas'
      },
      {
        title: 'Piccola Italia - trattoria & pizzeria',
        address: 'Maironio g. 22, Kaunas 44298'
      }
    ]
    const {
      headerText,
      headerTx,
    } = this.props


    const styles = {

      shadow: {
        shadowColor: "#000",
        shadowOffset: {
          width: 0,
          height: 1,
        },
        shadowOpacity: 0.1,
        shadowRadius: 3.84,
        elevation: 5,
      },
      searchIcon: {
        marginRight: 10,
        width: 20,
        height: 20,
      },
      modalStyle: {
        height: Dimensions.get('window').height,
      },
      input: {
        flex: 1,
        backgroundColor: '#fff',
        color: '#424242',
      },
    }
    const searchSection = {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'flex-start',
      backgroundColor: '#fff',
      ...styles.shadow
    } as ViewStyle
    const header = headerText || (headerTx && translate(headerTx)) || ""

    return (
      <View>
        <View style={[searchSection,]}>

          <TextField
            onFocus={() => {
              this.showContent(true);
            }}
            onBlur={() => {
              this.showContent(false);

            }}
            onChangeText={this.search} style={styles.input}
            inputStyle={{ borderBottomWidth: 0, paddingLeft: 10 }}
            placeholder="Paieska" />
          <Icon style={styles.searchIcon} icon="search" />
        </View>
        <Animated.View style={{
          width: '100%',
          selfAlign: 'center',
          opacity: this.state.modalOpacity,
          alignContent: 'center',
          alignItems: 'center',
          height: this.state.fullHeight,
          backgroundColor: "#fff",
        }}>

          <View
            style={{
              width: '100%',
              paddingBottom: 15,
              paddingTop: 15,
              backgroundColor: '#fff',
              ...styles.shadow
            }}
          >
            <View
              style={{
                width: '90%',
                flexDirection: 'row',
                alignItems: 'center',
                marginLeft: 'auto',
                justifyContent: 'space-between',
                marginRight: 'auto',
              }}
            >
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center'
                }}
              >
                <Icon style={{ width:20, height:20, marginRight: 15 }} icon="near_me"></Icon>
                <Text style={{
                  fontSize: 18,
                  color: '#707070',
                }}>Netoliese</Text>
              </View>
              <Icon style={{width:24,height:24}} icon='map'></Icon>
            </View>
          </View>
          {searchResults.map((result, i) => (
            <View
              key={i}
              style={{
                width: '90%',
                justifyContent: 'flex-start',
                marginBottom: 10,
                paddingTop: 10,
                paddingBottom: 10,
                borderBottomWidth: 1,
                borderColor: '#C9C9C9',
                marginTop: 10,
                flexDirection: 'row',
                alignItems: 'center'
              }}>
              <Icon style={{ marginRight: 15 }} icon='clock'></Icon>
              <View>
                <Text
                  style={{
                    fontWeight: 'bold',
                    fontSize: 18,
                    paddingBottom: 5,
                    color: '#3B3B3B',
                  }}
                >{result.title}</Text>
                <Text
                  style={{
                    fontSize: 14,
                    fontWeight: '300',
                    color: '#757575',
                    paddingBottom: 10,
                  }}
                >{result.address}</Text>
              </View>
            </View>
          ))}
        </Animated.View>
      </View>
    )
  }
}