import { List } from 'immutable';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Button, Picker, Text, TextInput, View } from 'react-native';

import { PHONE_TYPE_DEFAULT, PHONE_TYPES } from '../../../constants/constants.js';

import PhoneListItem from './PhoneListItem.js';

import styles from '../Profile.styles.js';

const defaultState = {
    editingIndex: null,
    isEditing: false,
    newPhone: null,
    newPhoneType: PHONE_TYPE_DEFAULT,
};

export default class PhoneListInput extends Component {
    static get propTypes() {
        return {
            handleAdd: PropTypes.func.isRequired,
            handleDelete: PropTypes.func.isRequired,
            handleEdit: PropTypes.func,
            phones: PropTypes.instanceOf(List).isRequired,
        };
    };

    static get defaultProps() {
        return {
            handleEdit: null,
        };
    };

    constructor(props) {
        super(props);

        this.state = { ...defaultState };

        this.handleAdd = this.handleAdd.bind(this);
        this.handleEdit = this.handleEdit.bind(this);
        this.handleEditCancel = this.handleEditCancel.bind(this);
    }

    handleAdd() {
        const { phones } = this.props;
        const { newPhone, newPhoneType } = this.state;
        this.props.handleAdd(phones.push({ number: newPhone, label: newPhoneType }));
        this.setState(defaultState);
    }

    handleEdit(index) {
        const { phones } = this.props;
        const { newPhone, newPhoneType } = this.state;
        this.props.handleEdit(phones.set(index, { number: newPhone, label: newPhoneType }));
        this.setState(defaultState);
    }

    handleEditStart(index) {
        const toBeEdited = this.props.phones.get(index);
        this.setState({
            editingIndex: index,
            isEditing: true,
            newPhone: toBeEdited.get('number'),
            newPhoneType: toBeEdited.get('label'),
        });
    }

    handleEditCancel(index) {
        this.setState(defaultState);
    }

    render() {
        const { phones } = this.props;
        const { isEditing, newPhone, newPhoneType } = this.state;
        const numbersTitle = 'Numbers';

        return (
            <View>
                <Text style={[styles.groupHeading, styles.requiredLabel]}>{numbersTitle}</Text>
                {phones !== null && phones.size > 0 && (
                    <View style={styles.phoneList}>
                        {phones.map((phone, index) =>
                            <PhoneListItem
                                hideDelete={phones.size < 2}
                                index={index}
                                label={phone.label}
                                number={phone.number}
                                handleDelete={this.props.handleDelete}
                                handleEdit={this.props.handleEdit ? this.handleEdit : null}
                                handleEditStart={this.handleEditStart}
                            />
                          )}
                    </View>
                )}
                <TextInput
                    onChangeText={(text) => this.setState({ newPhone: text })}
                    placeholder="phone number"
                    style={[styles.textInput, styles.requiredInput]}
                    value={this.state.newPhone}
                />
                <Picker
                    onValueChange={(type, index) => this.setState({ newPhoneType: type })}
                    selectedValue={this.state.newPhoneType}
                >
                    {PHONE_TYPES.map((type) => <Picker.Item key={type.value} {...type} />)}
                </Picker>
                <Button
                    disabled={!this.state.newPhone && !this.state.newPhoneType}
                    onPress={isEditing ? () => this.handleEdit(index) : this.handleAdd}
                    title={isEditing ? 'update' : 'add number'}
                />
                {isEditing && (
                    <Button
                        onPress={this.handleEditCancel}
                        title="cancel"
                    />
                )}
            </View>
        );
    }
}