import React from "react";
import { Text, View, StatusBar, Image } from "react-native";
import styled from "styled-components";
import { NavigationScreenProp, NavigationState } from 'react-navigation';
import Swiper from 'react-native-swiper';
import ProfileInputContainer from "../components/profile/ProfileInputContainer";
import AvailableProgram from "../components/profile/AvailableProgram";
import ConnectUtility from "../components/profile/ConnectUtility";
interface NavigationParams {
  text: string;
}
type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

interface Props {
  navigation: Navigation;
}
interface State {
  firstName: string;
  lastName: string;
  locationName: string;
  zipcode: string;
  swipeIndex: number;
}

export default class ProfileSetup extends React.Component<Props, State> {
  swiper: React.RefObject<any>;

  constructor(props: Props) {
    super(props);
    this.swiper = React.createRef();
    this.state = {
      firstName: "",
      lastName: "",
      locationName: "",
      zipcode: "",
      swipeIndex: 0,
    }
  }

  _onSendLinkPressed = () => {
    // TODO: set this.state.emailError a message if there is no email found from db.
  }

  _onNext = () => {
    this.swiper.current.scrollBy(1);
  }

  _renderPagination = (index: number, total: number) => {
    if (total <= 1) return null

    let dots = [];
    const ActiveDot = (
      <View
        style={{
          backgroundColor: '#4a8e1f',
          width: 8,
          height: 8,
          borderRadius: 4,
          marginLeft: 3,
          marginRight: 3,
          marginTop: 3,
          marginBottom: 3
        }}
      />
    )
    const Dot = (
      <View
        style={{
          backgroundColor: 'rgba(0,0,0,.2)',
          width: 8,
          height: 8,
          borderRadius: 4,
          marginLeft: 3,
          marginRight: 3,
          marginTop: 3,
          marginBottom: 3
        }}
      />
    )
    for (let i = 0; i < total; i++) {
      dots.push(
        i <= index
          ? React.cloneElement(ActiveDot, { key: i })
          : React.cloneElement(Dot, { key: i })
      )
    }

    return (
      <View
        pointerEvents="none"
        style={{
          position: 'absolute',
          bottom: "10%",
          left: 0,
          right: 0,
          flexDirection: 'row',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'transparent'
        }}
      >
        {dots}
      </View>
    )
  }

  _onIndexChanged = (index: number) => {
    console.log("swiped!, index: ", index);
    this.setState({
      swipeIndex: index
    })

  }
  _onFirstNameChange = (event: string) => {
    this.setState({
      firstName: event
    })
  }
  _onLastNameChange = (event: string) => {
    this.setState({
      lastName: event
    })
  }
  _onLocationNameChange = (event: string) => {
    this.setState({
      locationName: event
    })
  }
  _onZipcodeChange = (event: string) => {
    this.setState({
      zipcode: event
    })
  }
  _calculateScrollEnabled = (index: number) => {
    if (index === 0) {
      const firstStepButtonDisabled: boolean = this.state.firstName.length > 0 && this.state.lastName.length > 0
      return firstStepButtonDisabled;
    }
  }
  _renderBackButton = () => {
    let button = null;
    if (this.state.swipeIndex !== 0) {
      button = <Text>Backk</Text>
    }
    if (button !== null) {
      return (
        <BackButton onPress={() => this.swiper.current.scrollBy(-1)}>
          <Image style={{ width: 30, height: 30 }} source={require('../assets/ic-keyboard-backspace.png')} />
          <BackText>Back</BackText>
        </BackButton>
      )
    }
    return;
  }

  render() {
    const { firstName, lastName, swipeIndex, locationName, zipcode } = this.state;
    const firstStepButtonDisabled: boolean = firstName.length > 0 && lastName.length > 0
    const secondStepButtonDisabled: boolean = locationName.length > 0 && zipcode.length > 0

    return (
      <Container>
        <StatusBar barStyle="dark-content" />
        <Swiper
          ref={this.swiper}
          loop={false}
          renderPagination={this._renderPagination}
          onIndexChanged={this._onIndexChanged}
          showsButtons={false}
          scrollEnabled={true}
        >
          <ViewContainer>
            <ProfileInputContainer
              title={"Profile setup"}
              _onTopTextInputChange={this._onFirstNameChange}
              _onBottomTextInputChange={this._onLastNameChange}
              topPlaceholder={"First name"}
              bottomPlaceholder={"Last name"}
              _onNext={this._onNext}
              swipeIndex={swipeIndex}
              firstStepButtonDisabled={firstStepButtonDisabled}
            />
          </ViewContainer>
          <ViewContainer>
            <BackContainer>
              {this._renderBackButton()}
            </BackContainer>
            <ProfileInputContainer
              title={"Location setup"}
              _onTopTextInputChange={this._onLocationNameChange}
              _onBottomTextInputChange={this._onZipcodeChange}
              topPlaceholder={"Location name"}
              bottomPlaceholder={"Zip code"}
              _onNext={this._onNext}
              swipeIndex={swipeIndex}
              secondStepButtonDisabled={secondStepButtonDisabled}
            />
          </ViewContainer>
          <ViewContainer>
            <BackContainer>
              {this._renderBackButton()}
            </BackContainer>
            <AvailableProgram
              _onNext={this._onNext}
            />
          </ViewContainer>
          <ViewContainer>
            <BackContainer>
              {this._renderBackButton()}
            </BackContainer>
            <ConnectUtility
              _onNext={this._onNext}
            />
            <Text>44</Text>
          </ViewContainer>
        </Swiper>
      </Container>
    )
  }
}
const Container = styled.View`
  flex:1;
  justify-content: center;
  align-items: center;
`;
const ViewContainer = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;

`;
const BackContainer = styled.View`
  position: absolute;
  top: 50;
  left: 5%;
  justify-content: flex-end;
  flex-direction: row;
`;
const BackButton = styled.TouchableOpacity`
  flex-direction: row;
`;
const BackText = styled.Text`
  top: 3;
  font-family: Avenir;
  font-size: 18px;
  font-weight: 500;
  color: #4a4a4a;

`;