import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput, ScrollView } from 'react-native';
import Button from '../../components/Button';
import { CountryDropCode, GetCountryList } from '../../components/CountryIcon';
import Dropdown from '../../components/Dropdown';

export default class EditAddress extends Component {
  constructor(props) {
    super(props);
    this.state = {
      addressDto: {
        countryCode: "",
        city: "",
        street: "",
        zipCode: "",
        houseNumber: ""
      }
    };
  }

  componentDidMount() {
    const address = userInfo.address ?? {}
    if (!address.countryCode) {
      address.countryCode = "SG"
    }
    this.setState({
      addressDto: address,
      countryList: [],
    })
    userInfo.editAddress = false;
    GetCountryList(list => {
      this.setState({
        countryList: list
      })
    })
  }

  changeCountry(value, index) {
    this.state.addressDto.countryCode = value;
    this.setState({
      addressDto: this.state.addressDto
    })
  }

  saveInfo() {
    const dto = this.state.addressDto
    if (!dto.city) {
      toastShort($t('profile.plsInputCity'));
      return;
    }
    if (!dto.street) {
      toastShort($t('profile.plsInputStreet'));
      return;
    }
    if (!dto.houseNumber) {
      toastShort($t('profile.plsInputUnitNo'));
      return;
    }
    if (!dto.zipCode) {
      toastShort($t('profile.plsInputPostal'));
      return;
    }
    userInfo.address = dto;
    userInfo.addressLine = dto.houseNumber + ', ' + dto.street + ', ' + dto.zipCode
    console.log(userInfo.addressLine);
    userInfo.editAddress = true;
    goBack();
  }

  render() {
    return (
      <View style={styles.container}>
        <ScrollView style={ui.flex1}>
          <View style={styles.formView}>
            <Text style={styles.label}>{$t('sign.labelCountry')}</Text>
            <Dropdown
              style={styles.selectView}
              title={$t('sign.labelCountry')}
              list={this.state.countryList}
              value={this.state.addressDto.countryCode}
              nameKey='countryName'
              valueKey='countryCode'
              onChange={(value, index)=> this.changeCountry(value, index)}
              customerItemView={
                (item, index, onClick) => 
                <CountryDropCode
                  key={index} 
                  country={item}
                  value={this.state.addressDto.countryCode}
                  onClick={onClick}/>
              }/>
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>{$t('profile.labelCity')}</Text>
            <TextInput
              style={styles.formInput}
              placeholder={$t('profile.labelCity')}
              maxLength={50}
              placeholderTextColor={textPlacehoder}
              defaultValue={this.state.addressDto?.city}
              onChangeText={text => this.state.addressDto.city = text}
            />
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>{$t('profile.street')}</Text>
            <TextInput
              style={styles.formInput}
              placeholder={$t('profile.hintStreet')}
              maxLength={50}
              placeholderTextColor={textPlacehoder}
              defaultValue={this.state.addressDto?.street}
              onChangeText={text => this.state.addressDto.street = text}
            />
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>{$t('profile.unitNumber')}</Text>
            <TextInput
              style={styles.formInput}
              placeholder={$t('profile.hintUnitNo')}
              maxLength={15}
              placeholderTextColor={textPlacehoder}
              defaultValue={this.state.addressDto?.houseNumber}
              onChangeText={text => this.state.addressDto.houseNumber = text}
            />
          </View>
          <View style={styles.formView}>
            <Text style={styles.label}>{$t('profile.postalCode')}</Text>
            <TextInput
              style={styles.formInput}
              placeholder={$t('profile.hintPostal')}
              maxLength={10}
              placeholderTextColor={textPlacehoder}
              defaultValue={this.state.addressDto?.zipCode}
              onChangeText={text => this.state.addressDto.zipCode = text}
            />
          </View>
        </ScrollView>
        <View style={styles.buttonView}>
          <Button
            text={$t('common.save')}
            elevation={1.5}
            onClick={() => {
              this.saveInfo();
            }}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: pageBackground
  },
  formView: {
    paddingTop: 16,
    paddingLeft: 16,
    paddingRight: 16,
    paddingBottom: 4
  },
  selectView: {
    marginTop: 4,
    marginBottom: -8,
    ...$padding(8, 0, 8, 4),
    alignItems: 'center',
    flexDirection: 'row',
    borderBottomColor: '#EEE',
    borderBottomWidth: 1
  },
  label: {
    color: textPrimary,
    fontSize: 14
  },
  formInput: {
    color: textPrimary,
    fontSize: 14,
    height: 44,
    paddingBottom: 2,
    borderBottomColor: '#EEE',
    borderBottomWidth: 1
  },
  buttonView: {
    padding: 16,
    marginBottom: 4
  }
})